[Пользовательская директива] Разница между помещением области. $ Watch on link vs scope. $ Watch on controller

Question

Извините, если на это был дан ответ, но я не могу найти документацию, которая удовлетворит меня.

В чем разница между использованием области. $ Watch на ссылке и функцией контроллера в пользовательской директиве?

var linker = function (scope, element) { 

    // same watch block 
    scope.$watch('propertyToWatch', function (value) { 

    }); 

    element.html(template).show(); 
    $compile(element.contents())(scope); 
}; 

return { 
    require: '^directiveName', 
    scope: { 

    }, 
    link: linker, 
    controller: ['$scope', function ($scope) { 

     // same watch block 
     scope.$watch('propertyToWatch', function (value) { 
     }); 
    } 

Мое приложение ведет себя точно так же, как и логика ввода в обоих местах. Есть идеи?

Answer 1

Нет никакой разницы, кроме того, что она находится в другом месте.

Answer 2

Функционально нет никакой разницы между двумя - в любом случае вы добавляете наблюдателя в область действия (если она действует по-другому, тогда возникла бы проблема!).

Я обычно добавляю наблюдателей в директиве, чтобы контролировать, как внешние атрибуты сопоставляются с внутренними переменными сферы (аналогично области выделения директивы). то есть контроллеру не важно, откуда берутся значения, если они находятся в области видимости.

Затем я использую наблюдателей в контроллере для просмотра значений этих внутренних свойств - чтобы знать, когда под-свойства изменились и реагируют на это внутри контроллера. то есть директива не заботится о том, как используются свойства, просто нужно поместить их в область действия контроллера.

Ниже приведен пример с использованием изолята сферы:

angular.module('MyModule').directive('myDirective', function(){ 
    return { 
     scope: { 
      // The isolate scope sets up a watcher on the external 
      // property and makes it available on the scope 
      // as `scope.internalProp` 
      'internalProp': '=externalProp' 
     }, 
     controller: function($scope){ 
      // Work with `internalProp` - the directive 
      // manages putting it on the scope. 
      $scope.internalProp //... 

      $scope.$watch('internalProp.myProp', function(value){ 
       // Do something when `myProp` changes. 
      }); 
     } 
    }; 
}); 

Ниже приведен пример использованием детской сферы, но отображение того же внешнее значением scope.internalProp. Это не создает область выделения, поэтому вы все равно получаете наследование сферы (что иногда может быть полезно).

angular.module('MyModule').directive('myDirective', function($parse){ 
    return { 
     scope: true, 
     link: function(scope, element, attr){ 
      // Example of manually watching an attribute value 
      // in a directive. 

      var propGetter = $parse(attr['externalProp']); 
      scope.$parent.$watch(propGetter, function(value){ 
       scope.internalProp = value; 
      }); 
     }, 
     controller: function($scope){ 
      // Work with `internalProp` - the directive 
      // manages putting it on the scope. 
      $scope.internalProp //... 

      $scope.$watch('internalProp.myProp', function(value){ 
       // Do something when `myProp` changes. 
      }); 
     } 
    }; 
}); 

В обоих примерах это директива, которая управляет тем, как внешние атрибуты отображаются в области видимости внутренних свойств, а затем контроллер может работать с этими внутренними свойствами по мере необходимости.