angularjs - 如何为自定义指令实现 ng-change

Question

我有一个带有类似模板的指令

<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同步执行而没有超时或观察者？

示例:http://plnkr.co/edit/8H6QDO8OYiOyOx8efhyJ?p=preview

Answer 1

如果您需要 ngModel，您只需在 ngModelController 上调用 $setViewValue，它会隐式评估 ng-change >。链接函数的第四个参数应该是 ngModelCtrl。以下代码将使 ng-change 适用于您的指令。

link : function(scope, element, attrs, ngModelCtrl){
    scope.updateModel = function(item) {
        ngModelCtrl.$setViewValue(item);
    }
}

为了使您的解决方案发挥作用，请从 myDirective 的隔离范围中删除 ngChange 和 ngModel。

这是一个笨蛋:http://plnkr.co/edit/UefUzOo88MwOMkpgeX07?p=preview