观看ngModel值从父元素上的指令更改

Question

我有一条指令，监视输入字段中的更改

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>

那我怎么还能看着输入的变化呢？

Answer 1

简而言之： 您可以，但不应该 。

首先， ngModel指令具有一个controller 。 它的$viewChangeListeners属性可能是您真正想要使用的属性（因为您的“自动完成”指令可能会仅查找视图值更改）。 您可以将更改侦听器推入该数组。

其次（更重要的是），您不应该仅从祖先元素中引导这种功能。 如果您希望与ngModel进行交互， ngModel最好将指令直接使用它或其后代（而不是带有<input>的选项）放在元素上。 这并不会阻止您在祖先上放置一些通用逻辑并与祖先进行交互（就像ngModel与ngForm交互）。

---

s and s, you can always either 如果您不关心和 ，则始终可以

1. 在输入中输入一个name ， ngModelController从ngForm获取ngForm （如果您的指令位于其下），或者
2. 找到<input>并获得ngModelController使用angular.element(...).controller('ngModel')