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; 
    } 
); 

當然有更好的方式來組織它，但我希望它足以幫助你的想法。