Разработка

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

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

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

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

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s