Изолировать директиву scope и $ observer в AngularJS

Я продолжаю трагедию, пытаясь научиться писать хорошие директивы в AngularJS ... но после прочтения многих статей, у меня есть одни и те же вопросы и проблемы. Вот мой тест директива: http://plnkr.co/edit/rjR8Q2TQi59TWSW0emmo?p=preview

HTML:

<!DOCTYPE html> 
<html ng-app="app"> 

    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="myController"> 

    <span my-directive caption="{{foo}}"></span> 

    <span my-directive caption="{{bar}}"></span> 

    </body> 

</html>

ЯШ:

app = angular.module('app', []); 

app.controller('myController', ['$scope', function ($scope) { 

    $scope.foo = "initial foo"; 

    setTimeout(function() { // <-- simulate an async call or whatever... 
    console.log('after 3 sec in foo:'); 
    $scope.foo = "changed foo"; 
    }, 3000); 

    $scope.bar = "initial bar"; 

    setTimeout(function() { // <-- simulate an async call or whatever... 
    console.log('after 3 sec in bar:'); 
    $scope.bar = "changed bar"; 
    }, 3000); 

}]); 

app.directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      caption: '@' 
     }, 
     link: function(scope, element, attrs) { 
      attrs.$observe('caption', function(value) { 
       console.log(value); 
      }) 
     } 
    } 
});

Мои вопросы:

1) Почему он не получает значение заголовка обновления после задержки?

2) Есть ли лучший способ обновить значения без использования $ observ? (Я читаю здесь: https://www.accelebrate.com/blog/effective-strategies-avoiding-watches-angularjs/, но ни один из объясненных методов кажется чистым, они просто кажутся взломанными обходными способами).

3) Есть ли разница в производительности между $ watch и $ observ? (что лучше? Я читал везде, чтобы использовать $ watch как можно меньше, то же самое для $ observ).

Спасибо всем, кто поможет мне очистить все эти вещи!

источник

2015-12-13 wizzy

и 2. Используйте услугу $timeout. setTimeout не информирует Угловые об изменениях, которые он делает. Вам необходимо вручную запустить цикл $digest в обратном вызове, который обрабатывает $timeout.

Для получения дополнительной информации см. this article.

В общем, $watch и $observe такие же, с точки зрения производительности. Они свидетельствуют о том, что ваш код может быть улучшен. Как правило, как только вы получаете около 2000 наблюдателей на странице, он имеет тенденцию становиться вялым.

источник

2015-12-13 00:11:19

Большое спасибо, я не знал об этом! – wizzy

Изолировать директиву scope и $ observer в AngularJS

ответ

Смежные вопросы