AngularJS：监视元素可见性答案

【问题标题】：AngularJS: watch element visibilityAngularJS：监视元素可见性
【发布时间】：2015-06-27 05:38:22
【问题描述】：

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

这里是plunker 的示例作品。在这段代码中，窗口应该通过单击按钮滚动到“#hiddenObj”div。但第一次单击时，只有 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

【讨论】：

我不想隐藏 obj 占据的地方，我想要像 $watch 这样的元素，当 ng-hide="true" 窗口滚动到对象。
这种方法不适用于我的情况。我有 Bootstrap 选项卡式表单，我正在观看最后一个具有画布的选项卡的样式属性“显示”。如果“显示”的值从“无”变为“阻止”，那么我想触发调整大小事件来重绘位于该选项卡内的画布。我想我需要调用 $scope.$digest() 才能使其工作，但我不知道如何。我正在使用自定义指令来控制最后一个选项卡并观察显示 css 属性。在调试期间，我可以看到手表正在执行，但它似乎运行得太早并且无法始终正常运行。

【解决方案2】：

Angular 为使用 ng-hide/ng-show 隐藏的元素添加了一个“ng-hide”类。

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

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

【讨论】：