Question

我体内有一个看不见的元素。我希望在它变得可见时触发一个功能。这是什么最好的做法？

这是样本作品的plunker。在这段代码中，窗口应该通过单击按钮滚动到'#hiddenObj'div。但是第一次点击，只有div变得可见，第二次窗口滚动。

Answer 1

ng-hide = false有效地添加＆＃39; display：none＆＃39; to元素表示元素在DOM中没有任何滚动位置。

所以只需在元素的可见状态上设置$ watch，如下所示

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

请参阅http://plnkr.co/edit/BGBygAWdwU6zv7anx3qO?p=preview

Answer 2

Angular添加了一个＆＃34; ng-hide＆＃34;使用ng-hide / ng-show隐藏的元素类。

观察是否有变化的一种方法是为元素类添加一个观察者，并检查它是否包含＆＃34; ng-hide＆＃34;。

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

AngularJS：观察元素可见性

2 个答案: