Как смотреть собственность в соответствии с директивой

У меня есть контроллер, у которого есть счетчик, который время от времени меняется.
Этот счетчик привязан к атрибуту директивы и читается внутри функции ссылки этой директивы.

Как я могу заставить директиву запускать функцию каждый раз, когда изменяется значение attr?

Спасибо.

Ответ 1

Внутри вашей соответствующей функции link: (если ваш атрибут называется counter, а ваша переменная области видимости: scope)

scope.$watch(attrs.counter, function (newTime) {
                    //do something with the new Time
});

Другим способом, безусловно, более эффективным способом:

Интерполирование атрибута

Внутри вашей директивы задайте свойство scope следующим образом (оно будет выделено так):

scope: { counter: '@'}

counter будет автоматически наблюдаться, обеспечивая текущее значение, пока вызывается функция link.

'@' лучше, чем '=' здесь, так как вы полагаете, что вы не устанавливаете счетчик в новое значение в своей директиве, то есть просто читаете его. Действительно, = более полезен для двусторонней привязки данных, но вам может и не понадобиться.

Ответ 2

Я использую этот aproach:

.directive('mydirective',
 [function (){
    return {
      ...
      scope: {
        id: '@',
      },
      controller: function ($scope, $element, $attrs) {
         $attrs.$observe('id', function(passedId) {
           /// do what is needed with passedId
         });
    ...

И используемая директива и id прошли следующим образом:

<div mydirective id="{{someprop.id}}" />

Ответ 3

Используйте attrs.$observe(key, fn). Дополнительная информация на $compile.directive.Attributes

attrs.$observe('counter',function(counter){

});

Связанный ответ: fooobar.com/questions/18387/...

$observ() - это метод объекта Attributes, и как таковой он может только для наблюдения/просмотра изменения стоимости атрибута DOM. Это используется только внутри внутренних директив. Используйте $observ, когда вам нужно наблюдать/смотреть атрибут DOM, который содержит интерполяцию (т.е. {{}} 'Ы). Например, attr1 = "Name: {{name}}", а затем в директиве: attrs. $наблюдать ('attr1',...). (Если вы попробуете область действия. $Watch (attrs.attr1,...) это не сработает из-за {{}} s - вы получите undefined.) Использование $смотреть за всем остальным.

Ответ 4

Если вы можете, измените директиву на изолированную область и используйте определение =. Это создаст двухстороннюю привязку для свойства scope:

app.directive('myDirective', function() {

    return {
        scope: { counter: '=' }
    }
});

Ответ 5

Я должен был реализовать это сам и нашел решение! К сожалению, когда я пытался. $Watch, ошибки просто извергались на консоли. Поэтому вместо этого я использовал $observ.

Здесь мое решение:

angular.module('app').directive('aDate', [
    function() {
        return {
            template: '<span>{{date}}</span>',
            restrict: 'E',
            replace: true,
            link: function(scope, element, attrs) {
                attrs.$observe('date', function (val) {
                    var d = new Date(val);
                    element.text(d);
                });
            }
        };
    }
]);

Приведенный выше код меняет дату скобки, когда изменяется атрибут даты элемента!

Ура!