angularjs – 如何实现自定义指令的ng更改

发布时间：2020-12-17 08:42:16 所属栏目：安全来源：网络整理

导读：我有一个指令与一个模板 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

我有一个指令与一个模板

<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

如果你需要ngModel，你可以在ngModelController上调用$ setViewValue，隐式地评估ng-change。链接函数的第四个参数应该是ngModelCtrl。以下代码将使您的指令的ng更改工作。

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

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

这里是一个plunk：http://plnkr.co/edit/UefUzOo88MwOMkpgeX07?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!