Общие переменные между контроллерами с сервисом в AngularJS

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 

и изменить нг нажмите на

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

, который должен быть шагом в правильном направлении.

В дополнение к этому, вы сможете сократить код, если вы также добавить $scope.sharedProperties = sharedProperties к MyCtrl2 и связать с {{}} sharedProperties.door