AngularJS工厂双向数据绑定
我有一些绑定变量的角控制器和工厂产生的阵列(用于填充的选项中选择控制):AngularJS工厂双向数据绑定
// 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
的结果数组。
它的工作原理是第一次,因为你调用一个返回一个新数组的函数,然后你的视图只能引用该数组,并且永远不会再次调用该函数。最简单的解决办法是增加一个$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;
}
);
当然有更好的方式来组织它,但我希望它足以帮助你的想法。
谢谢你,你的方法很棒! (在'function(newVal ...)'后面只有一个'真正的'参数,事情是,我想在多个控制器中使用这个工厂,可能有任何改变工厂的方法,所以不会有需要在控制器中添加额外的代码? – user435943 2014-10-17 13:10:15
如果您只更新用户的属性,则可以将整个用户传递到工厂,并在重建阵列的工厂中添加手表。数组并添加新数据,试图用新数组替换数组将不起作用,因为要更新的数据仍然会引用旧数组。 – 2014-10-17 13:25:16
我们无法找到错误,因为你没有张贴有这个bug真正的代码。 – 2014-10-17 12:57:34
'getOptions'的发布定义。 – dfsq 2014-10-17 13:00:33
它不是一个真正的错误,代码运行良好,它更多approching这个问题的正确途径。 – user435943 2014-10-17 13:01:16