觀看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')