观察父元素上指令的 ngModel 值变化

Watch ngModel value change from directive on parent element

本文关键字：ngModel 变化 指令 元素 观察      更新时间：2023-09-26

我有一个指令，它监视输入字段中的变化

directive('autocomplete', function(){
    return {
        link: function(scope, element, attrs){
            scope.$watch(attrs.ngModel, function(){
                console.log('change');
            });
        }
    };
});

这适用于以下元素

<input type='text' ng-model='searchTerm' autocomplete>

但是，如果我把我的指令放在祖先元素上，就像这样：

<div autocomplete>
    <input type='text' ng-model='searchTerm'>
</div>

那我怎么还能观察输入的变化呢？

简单地说：你可以，但你不应该。

首先，ngModel指令有一个控制器。它的$viewChangeListeners属性可能是您真正想要使用的属性(因为您的"自动完成"指令可能只是在寻找视图值更改(。您只需将更改侦听器推送到该数组中即可。

其次(更重要的是(，您不应该仅从祖先元素直接使用这种功能。如果你想与ngModel交互，你最好把你的指令放在使用它或其后代的元素上(而不是带有<input>的选项(。这并不能阻止你把一些共同的逻辑放在祖先身上并与那个祖先互动(就像ngModel与ngForm互动一样(。

如果你不关心应该和不应该，你总是可以

  1. 在您的输入上放一个name并从ngForm获取ngModelController(如果您的指令在其下(，或者
  2. 找到<input>并使用angular.element(...).controller('ngModel')获取ngModelController。
相关文章：