изменение значения Watch 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> 

Как я могу по-прежнему наблюдать за inpu t для изменения тогда?

Answer 1

Проще говоря: можно, но вы не должны.

Во-первых, директива ngModel имеет controller. Свойство $viewChangeListeners - это, вероятно, то, что вы действительно хотели бы использовать (поскольку ваша директива autocomplete, вероятно, будет выглядеть только для изменения значений вида). Вы можете просто нажать слушателя изменений в этот массив.

Вторым (и более точным), вы не должны называть такую ​​функциональность только из элемента предка. Если вы хотите взаимодействовать с ngModel, лучше поместите свою директиву прямо на элемент, используя его или его потомку (не вариант с <input>). Это не мешает вам использовать некоторую общую логику для предка и взаимодействовать с этим предком (так же, как ngModel взаимодействует с ngForm).

---

Если вы не заботитесь о которые должен s- и НЕ СЛЕДУЕТ с, вы всегда можете либо

1. положить name на свой вход и получить ngModelController от ngForm (если ваша директива находится под ним), или
2. найти <input> и получить ngModelController с помощью angular.element(...).controller('ngModel').