AngularJS工厂双向数据绑定

Question

我有一些绑定变量的角控制器和工厂产生的阵列（用于填充的选项中选择控制）：

// Controller MyController 
angular.module('users').controller('MyController', ['$scope', 'Authentication', 'MyFactory', 
    function($scope, Authentication, MyFactory) { 
     $scope.user = Authentication.user; 
     $scope.options = MyFactory.getOptions($scope.user.firstName, $scope.user.lastName); 
     ... 
    } 
    ... 
} 

// Factory MyFactory 
angular.module('users').factory('MyFactory', 
    function() { 
     var _this = this; 
     _this._data = { 
      getOptions: function(firstName, lastName){ 
       return [ 
        firstName + ' ' + lastName, 
        lastName + ' ' + firstName 
        ... 
       ]; 
      } 
     }; 
     return _this._data; 
    } 
); 

它非常适用所述第一时间，但不保持控制器和工厂之间的数据同步。

预期的效果是，参数MyFactory.getOptions()的更改会修改分配给$scope.options的结果数组。

Answer 1

它的工作原理是第一次，因为你调用一个返回一个新数组的函数，然后你的视图只能引用该数组，并且永远不会再次调用该函数。最简单的解决办法是增加一个$scope.$watch您$scope.user变量回忆MyFactory.getOptions功能。

// Controller MyController 
angular.module('users').controller('MyController', ['$scope', 'Authentication', 'MyFactory', 
    function($scope, Authentication, MyFactory) { 
     $scope.user = Authentication.user; 
     $scope.options = MyFactory.getOptions($scope.user.firstName, $scope.user.lastName); 
     $scope.$watch("user", function(newVal,oldVal,scope) { 
      scope.options = MyFactory.getOptions(newVal.firstName, newVal.lastName); 
     }); 
     ... 
    } 
    ... 
} 

反正就是这样。可能需要稍微练习一下这个语法。

---

根据您的意见，尝试这样的事情：

// Controller MyController 
angular.module('users').controller('MyController', ['$scope', 'Authentication', 'MyFactory', 
    function($scope, Authentication, MyFactory) { 
     $scope.user = Authentication.user; 
     $scope.options = MyFactory.getOptions($scope, "user"); 
     ... 
    } 
    ... 
} 

// Factory MyFactory 
angular.module('users').factory('MyFactory', 
    function() { 
     var _this = this; 
     _this._data = { 
      getOptions: function(scope, property){ 
       var updateableArray = []; 
       function updateArray(user) { 
        //delete all elements of updateableArray 
        updateableArray.clear(); 
        //add all the new elements of updateableArray from user argument 
        updateableArray.push(firstName + ' ' + lastName); 
        updateableArray.push(lastName + ' ' + firstName); 
        .... 
       } 
       scope.$watch(property, function(newVal,oldVal,watchScope) { 
        updateArray(newVal); 
       }); 
       updateArray(scope[property]); 
       return updateableArray; 
      } 
     }; 
     return _this._data; 
    } 
); 

当然有更好的方式来组织它，但我希望它足以帮助你的想法。