我有一个带有类似模板的指令
<div>
<div ng-repeat="item in items" ng-click="updateModel(item)">
<div>
我的指令声明为:
return {
templateUrl: '...',
restrict: 'E',
require: '^ngModel',
scope: {
items: '=',
ngModel: '=',
ngChange: '&'
},
link: function postLink(scope, element, attrs)
{
scope.updateModel = function(item)
{
scope.ngModel = item;
scope.ngChange();
}
}
}
我希望在单击某个项目并且 foo
的值已更改时调用 ng-change
。
也就是说,如果我的指令实现为:
<my-directive items=items ng-model="foo" ng-change="bar(foo)"></my-directive>
我希望在 foo
的值更新后调用 bar
。
使用上面给出的代码,ngChange
被成功调用,但它是用 foo
的旧值而不是新的更新值调用的。
解决该问题的一种方法是在超时内调用 ngChange
,以便在未来某个时刻(当 foo
的值已更改)时执行它。但这个解决方案让我失去了对执行顺序的控制,我认为应该有一个更优雅的解决方案。
我还可以在父作用域中使用 foo
的观察者,但是这个解决方案并没有真正提供要实现的 ngChange
方法,我被告知观察者是伟大的内存消费者。
有没有办法让ngChange
同步执行而没有超时或观察者?
最佳答案
如果您需要 ngModel
,您只需在 ngModelController
上调用 $setViewValue
,它会隐式评估 ng-change
>。链接函数的第四个参数应该是 ngModelCtrl。以下代码将使 ng-change
适用于您的指令。
link : function(scope, element, attrs, ngModelCtrl){
scope.updateModel = function(item) {
ngModelCtrl.$setViewValue(item);
}
}
为了使您的解决方案发挥作用,请从 myDirective 的隔离范围中删除 ngChange 和 ngModel。
关于angularjs - 如何为自定义指令实现 ng-change,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24754005/