AngularJS: реагируем на изменение состояния объекта

21 Apr 2014

Допустим У нас есть часть шаблона, которая может быть либо отображена, либо скрыта. Нам нужно правильно реагировать на это и рассылать оповещения в скоуп (надо так).

Тогда мы просто берем и начинаем следить за состоянием нужного элемента.

angular.module('app')directive('watchState', function($rootScope) {  
 return {  
 restrict: 'A',  
 controller: function($scope, $element) {  
 // show. that state was changed by outer source.  
 // prevent action when no changes in $digest cycle  
 var toggled = false

$scope.$watch(function() {  
 if ($element.hasClass('ng-hide')) {  
 if (!toggled) {  
 toggled = true  
 $rootScope.$broadcast('log', 'text is hidden')  
 }  
 } else {  
 if (toggled) {  
 toggled = false  
 $rootScope.$broadcast('log', 'text is visible')  
 }  
 }  
 })  
 }  
 }  
})

Теперь мы можем следить за состоянием отображения любого элемента.

\<p ng-hide="hidden" watch-state\>some text\</p\>

Пример на jsFiddle