Javascript 两个控制器中共享的角度JS工厂不更新值_Javascript_Angularjs

Javascript 两个控制器中共享的角度JS工厂不更新值

javascript angularjs

Javascript 两个控制器中共享的角度JS工厂不更新值,javascript,angularjs,Javascript,Angularjs,Angular是新手，请原谅，但我的index.html是： <body> <div data-ng-controller="storeList"> <select ng-model="selectedItem" ng-options="c.CustomerID as c.CustomerName for c in customers" ng-change="changeCust(selectedItem)">

Angular是新手，请原谅，但我的index.html是：

<body>
    <div data-ng-controller="storeList">
        <select ng-model="selectedItem" ng-options="c.CustomerID as c.CustomerName for c in customers"
        ng-change="changeCust(selectedItem)">
            <option value="">Select Store</option>
        </select>
    </div>

    <div data-ng-controller="storeInfo">
        Selected Store is: {{selectedStore}}
    </div>
</body>

当我更改选择时，

currentCustomer.customerID

会更改，但不会在

storeInfo

控制器中更新

我错过了什么

谢谢你的帮助。

它不会更新，因为当你更新时

$scope.selectedStore = currentCustomer.customerID;

您创建的新属性

selectedStore

的值等于

currentCustomer.customerID

，但它们之间没有连接（无引用）。当原始更改时，它不会反映在第二个更改中

简单的解决方案是使用对象引用：

$scope.selectedStore = currentCustomer;

然后使用

{{selectedStore.customerID}

。

这两个绑定不适用于基本数据类型，因为没有引用来绑定它们并侦听它们的更改。您可以将currentCustomer对象分配给selectedStore范围变量，这样您就可以监听两个控制器中的更改

为了更好的可读性和理解，我对工厂实例进行了一些小的重构-

var-storeApp=angular.module（'storeApp'，[]）；
storeApp.factory（'currentCustomer'，函数（）{
var customerId=0；
函数getCustomerId（）
{
返回客户ID；
}
函数setCustomerId（id）
{
customerId=id；
}
返回{
getCustomerId:getCustomerId，
setCustomerId:setCustomerId，
getCustomers:函数（）{
console.log（“in-get”）
return[{CustomerID:1，CustomerName:'Store 1'}，
{CustomerID:2，CustomerName:'store2'}，
{CustomerID:3，CustomerName:'store3'}]
}
}
});
控制器（'storeList'，函数（$scope，$http，currentCustomer）{
$scope.customers=currentCustomer.getCustomers（）；
$scope.changeCust=函数changeCust（id）{
log（“更改ID自：+currentCustomer.getCustomerId（））
currentCustomer.setCustomerId（id）；
log（“ID现在为：+currentCustomer.getCustomerId（））
}
});
storeApp.controller（'storeInfo'，函数（$scope，currentCustomer）{
console.log（“设置storeInfo”）；
$scope.man='Rob'；
$scope.selectedStore=currentCustomer；
});

选择存储
所选存储为：{{selectedStore.getCustomerId（）}}
如果仍要使用
$scope.selectedStore=currentCustomer.customerID
这是另一种方法
Angularjs中的控制器间通信可以使用以下机制实现
使用$rootScope
通过使用Angularjs中创建自定义服务的机制之一。
这些是。。。
a） 工厂法
b） 价值法
c） 服务方法或
d） 提供方法
在本文中，我们将在Angularjs中使用工厂方法进行控制器间通信
请看一下这篇文章

下面是重构后的代码
HTML
谢谢你的解释，它起作用了。现在我想这是有道理的。另一种方法是使用提供者配方，如值或工厂来实现这一点，请参阅我的帖子以了解完整的细节。
$scope.selectedStore = currentCustomer;

  <div data-ng-controller="storeList">
        <select ng-model="selectedItem" ng-options="c.CustomerID as c.CustomerName for c in customers"
        ng-change="changeCust(selectedItem)">
            <option value="">Select Store</option>
        </select>
    </div>

    <div data-ng-controller="storeInfo">
        Selected Store is: {{selectedStore}}
    </div>

var storeApp = angular.module('storeApp',[])
storeApp.factory('currentCustomer',function($rootScope) {
  var currentCustomer =  {};
  currentCustomer.customerID = 0;
  currentCustomer.customerName = '';
      currentCustomer.getCustomers =  function () {
          return [{CustomerID:1,CustomerName:'Store 1'},
                  {CustomerID:2,CustomerName:'Store 2'},
                  {CustomerID:3,CustomerName:'Store 3'}]; 
      };
      currentCustomer.setCurrentCustomer = function (custObject) {
        this.customerID = custObject['CustomerID'];
        this.ustomerName = custObject['CustomerName'];
        this.publishChanges();
      }; 

      currentCustomer.getCustomerID = function(){
        return this.customerID;
      };

      currentCustomer.getCustomerName = function(){
        return this.customerName; 
      };      
      currentCustomer.publishChanges = function() {
              $rootScope.$broadcast('custDataChangeEvent');
      };
    return currentCustomer; 
});  

    storeApp.controller('storeList',function($scope,$http,currentCustomer,$filter) {
      $scope.customers = currentCustomer.getCustomers();
      $scope.changeCust = function changeCust(id) {
          var filteredCustomerList = $filter('filter')($scope.customers,{CustomerID:id},true);
          var currCustomer = filteredCustomerList[0];
          currentCustomer.setCurrentCustomer(currCustomer);
      };

    });
      storeApp.controller('storeInfo',function($scope,currentCustomer) {
      // listen to the events
      $scope.$on('custDataChangeEvent',function(){
       $scope.selectedStore = currentCustomer.getCustomerID();
      });
});