AngularJS: смотреть элемент видимости

У меня есть элемент внутри моего тела, который невидим. Я хочу вызвать функцию, когда она станет видимой. Какова лучшая практика для этого?

вот поршень к образцу работы. В этом фрагменте кода окно должно перейти к разделу '#hiddenObj', нажав кнопку. но первый щелчок, просто div становится видимым, а второй раз окно прокручивается.

Ответ 1

ng-hide = false эффективно добавляет 'display: none' к элементу, что означает, что у элемента не будет позиции для прокрутки в DOM.

Итак, просто установите $watch на видимое состояние элемента, как показано ниже

var scrollElement = "#hiddenObj";
$scope.$watch(function() { return angular.element(scrollElement).is(':visible') }, function() {
    scrollTo(scrollElement);
});

см. http://plnkr.co/edit/BGBygAWdwU6zv7anx3qO?p=preview

Ответ 2

Angular добавляет класс "ng-hide" к элементу, который скрыт с помощью ng-hide/ng-show.

Один из способов проверить, есть ли изменение, добавить наблюдателя для класса элемента и проверить, содержит ли он "ng-hide".

scope.$watch(function() { return element.attr('class'); }, function(newValue) { 
    if (newValue.match(/ng-hide/) !== null) {
        // Element is hidden.
    }       
});