在AngularJS中具有服务的控制器之间共享变量

我试图在我的控制器之间共享一组变量，但它似乎不起作用，我已经遵循了一些示例，但无法使其起作用

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

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

{{passenger}} <br />

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

index.html

至少是此页面上的重要代码

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

这就是它的工作原理。在

building.html

中，当我单击“下一步”按钮时，我正在设置建筑（下拉列表），我想在

passenger.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>

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

{{passenger}} <br />

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

谢谢

下一步

可能会引发错误（请检查您的浏览器调试控制台，如果是这样，请告诉我）

ng click正在尝试调用BuildingChgCtrl.setBldg，您显示的代码中不存在该文件

如果将以下内容添加到BuildingChgCtrl中

$scope.sharedProperties = sharedProperties

并将ng更改为单击

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

下一步

这应该是朝着正确方向迈出的一步

此外，如果您还将

$scope.sharedProperties=sharedProperties

添加到MyCtrl2并与{{sharedProperties.door}}

绑定，那么您将能够减少代码。Next

可能会引发错误（请检查您的浏览器调试控制台，如果是这样的话，请告诉我）

ng click正在尝试调用BuildingChgCtrl.setBldg，您显示的代码中不存在该文件

如果将以下内容添加到BuildingChgCtrl中

$scope.sharedProperties = sharedProperties

并将ng更改为单击

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

下一步

这应该是朝着正确方向迈出的一步

---

此外，如果您还将

$scope.sharedProperties=sharedProperties

添加到MyCtrl2，并与{{sharedProperties.door}}

绑定，则在进行这些更改后，Building和car变量仍然没有显示在password.html中，则可以减少代码。不知何故，当从building.html更改为passenger.html时，变量没有保存。我在这里更新了代码，我不知道是否可以处理多个html页面。在进行这些更改后，building和car变量仍然没有显示在passenger.html中。不知何故，当从building.html更改为passenger.html时，变量没有被保存。我在这里更新了代码，我不知道我是否可以处理多个html页面