Question

我正在尝试在我的控制器之间共享一组变量，但它似乎没有工作，我已经按照一些示例但无法使其工作。

以下是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

中显示它

由于

Answer 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}}绑定

，您将能够减少代码。

控制器与AngularJS中的服务之间的共享变量

1 个答案: