Как смотреть изменения $ scope в директиве?

Question

У меня есть директива, как это:

app.directive('selectedForm', function(MainService) { 
    return { 
     scope: { 
      formName: '=currentForm' 
     }, 
     restrict: 'E', 
     link: function($scope, iElm, iAttrs, controller) { 
      $scope.$watch('formName', function(oldV, newV) { 
       console.log(iElm); 
       if (someCondition) { 
        MainService.getForm($scope.formName).then(function(re) { 
         iElm.html(re); 
        }); 
       } 
      }); 
     } 
    }; 
}); 

Но, проблема в том, что я не могу наблюдать за изменениями. У меня есть элемент <select> в DOM, который изменяет значение currentForm usign ngModel. Но, хотя я выбираю вариант, функция watch не работает. Я что-то упускаю?

Answer 1

Вы не можете использовать то же самое $watch в angular directive так же, как в angular controller. Вместо этого, изменить его на что-то вроде этого:

изменить ваш html выбрать элемент к чему-то вроде этого:

<select model="selectedElements"> 
    ... 
    ... 
</select> 

и внутри директивы, изменить ваш $watch на:

... 
link: function($scope, iElm, iAttrs, controller) { 
      $scope.$watch('iAttrs.model', function(oldV, newV) { 
... 

Смотрите также : Is it ok watch the scope inside a custom directive?

---

EDIT:

код в вашем случае, чтобы посмотреть значение <select ng-model='currentForm'> ... </select> будет:

... 
link: function($scope, iElm, iAttrs, controller) { 
      $scope.$watch('iAttrs.currentForm', function(oldV, newV) { 
... 

---

EDIT 2

обновления в соответствии с комментариями:

В вашем html

<selected-form ng-model="currentForm"></selectedForm> 

и в контроллере

... 
link: function($scope, iElm, iAttrs, controller) { 
      $scope.$watch('iAttrs.ngModel', function(oldV, newV) { 
... 

---

EDIT 3

посмотреть обновленный plunker:

https://plnkr.co/edit/v5EnmpQ9UtApnM5ErnYi?p=preview