1

コントローラー間で変数のグループを共有しようとしていますが、機能していないようです。すでにいくつかの例に従いましたが、機能させることができません。

以下はJavaScriptです

angular.module('PickMeUp.controllers', []).
service('sharedProperties', function() {
  // Car Variables
  var make;
  var model;
  var color;

  // Bldg Variables
  var building = 'b';
      var door = 'd';

  return {
      getCar: function () {
          return make + " " + model + " " + color;
      },
      getBldg: function () {
          return building;
      },
      getDoor: function () {
          return door;
      },
      setCar: function (make1, model1, car1) {
          make = make1;
          model = model1;
          car = car1;
      },
      setBldg: function (building1, door1) {
          building = building1;
          door = door1;
          //****When this is called, displays the new values****
          alert("Bldg " + building);
          alert("Door " + door);
      }
  };
  }  
  })
.controller('MyCtrl2', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
      $scope.sharedProperties = sharedProperties
      console.log("ctrl2");
      $scope.passenger = 'esau';

      $scope.building = sharedProperties.getBldg();
      $scope.door = sharedProperties.getDoor();

      //****This is giving me the default values****
      console.log($scope.building);
      console.log($scope.door);

      //****This is undefined****
      alert("Bldg " + sharedProperties.building);
      alert("Door " + sharedProperties.door);
  } ])
.controller('BuildingChgCtrl', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
  $scope.sharedProperties = sharedProperties;
  $scope.buildings = ['DGTC', 'Walmart Home Office', 'Sam\'s Home Office'];
  $scope.exits = ['East', 'West', 'Vendor'];
  $scope.building;
  $scope.door;
  $scope.exitDisplay = 'none';
  $scope.change = function () {
      $scope.exitDisplay = 'inline';
      console.log("changed display");
  };
  console.log("controller called ");

  //$scope.building = sharedProperties.getBldg();
  //$scope.door = sharedProperties.getDoor();

  console.log($scope.building);
  console.log($scope.door);

//      $scope.setBldg = function(b,d) {
//          alert("Bldg " + sharedProperties.building);
//          alert("Door " + sharedProperties.door);
//          
//          sharedProperties.building = b;
//          sharedProperties.door = d;
//          //****When this is called, displays the new values****
//          alert("Bldg " + sharedProperties.building);
//          alert("Door " + sharedProperties.door);
//      }

  } ]);

そして、HTMLの下に

building.html

<form action="{{nextURL}}">
<div ng-controller="BuildingChgCtrl">
    <select ng-change="change()" ng-model="$parent.building" ng-options="b for b in buildings">
        <option value="" style="display:none;">Choose building</option>
    </select>
    <br />

    <select style="display:{{exitDisplay}};" ng-model="$parent.door" ng-options="e for e in exits">
        <option value="" style="display:none;">Choose Exit</option>
    </select>
    <br />
    bldg1 = {{building}}, door1 = {{door}} <br />
    <button ng-click="sharedProperties.setBldg(building,door)">Next</button>
    <a href="{{nextURL}}">Next</a>
</div>
<br />
bldg2 = {{building}}, door2 =  {{door}}
</form>

passenger.html

<div><a href="#/driverSubmitOffer">Passenger 1</a></div>

{{passenger}} <br />

building = {{sharedProperties.building}}<br />
door = {{sharedProperties.door}}</div>

index.html少なくともこのページの重要なコード

...
<div ng-view>
</div>
....

app.js少なくとも重要なコード

$routeProvider.when('/building', {templateUrl: 'partials/Building.html', controller: 'DriverBuildingCtrl'});
$routeProvider.when('/passengerQueue', {templateUrl: 'partials/Passenger.html', controller: 'MyCtrl2'});

これが動作するはずの方法です。次building.htmlへボタンをクリックしたときの建物（ドロップダウン）を設定していて、それを表示したいpassenger.html

ありがとう

4

1 に答える 1

1

<button ng-click="setBldg(building,door)">Next</button>おそらくエラーがスローされます (ブラウザのデバッグ コンソールを確認し、その場合はお知らせください)

ng-click は、表示したコードには存在しない BuildingChgCtrl.setBldg を呼び出そうとしています。

以下をBuildingChgCtrlに追加すると

$scope.sharedProperties = sharedProperties

ng-clickをに変更します

<button ng-click="sharedProperties.setBldg(building,door)">Next</button>

それは正しい方向への一歩になるはずです。

$scope.sharedProperties = sharedPropertiesさらに、MyCtrl2 にも追加して {{sharedProperties.door}} でバインドすると、コードを減らすことができます 。

于 2013-09-08T23:39:14.593 に答える