绑定到多个事件的 AngularJS 指令答案

【问题标题】：AngularJS directive that binds to multiple events绑定到多个事件的 AngularJS 指令
【发布时间】：2014-05-23 11:44:15
【问题描述】：

我有一个绑定到滚动事件的 AngularJS 指令：

angular.element($window).bind('scroll',function()
{
});

用于在固定元素到达页面底部时更新其类。

我遇到的问题是，当函数触发时，会绘制新元素并且页面会变长。当再次滚动时，这会被正确检测到并且元素会正确更新它的类，但是直到滚动事件触发它看起来是错误的。

有没有办法绑定指令以在新元素被绘制到 DOM 以及滚动时也触发？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

如何将新元素添加到 dom 中？有多种方法可以解决这个问题，具体取决于方式。假设它们是通过 ng-repeat 呈现的。为每个元素附加一个新指令（通过类、属性等......），然后在指令控制器中触发您需要的事件。比如：

<div data-ng-repeat="item in items" class="myDirectiveName">...</div>

然后在你的指令中：

.directive("myDirectiveName", function(){
    return {
        restrict: 'C',
        link: function(scope){
            //fire event
            scope.$emit("newElementAdded", element);
        }
    };
})

编辑

如果你只想让它在最后一个触发，你可以做一个检查

link: function(scope){
    if(scope.$last){
        ...
    }
}

Ng-repeats 附带了一些附加到它们的作用域的东西，您可以使用它们，$last、$first 等...在这里查看：https://docs.angularjs.org/api/ng/directive/ngRepeat

【讨论】：

应该可以，结果是 ngRepeat 的一部分。使用“加载 x 更多”按钮时会添加新结果，一次会添加 10 个结果。当 10 个结果加在一起时，该指令可能会快速连续触发 10 次。有没有限制它的选项，所以它只在添加 10 个元素时触发一次（在最后一个元素之后）
我只是在玩 $last，但每次添加东西时它似乎仍然在触发。大概是因为一次添加了 10 行，它绘制了 10 行，并且每次绘制的东西都是新的最后一项？
我的错 - 我一直在使用 scope.$watch($last)。您的方法非常有效，谢谢！

【解决方案2】：

使用 bind(或 on) 直接监听事件不会导致 Angular 的摘要循环。您需要在作用域上调用 $apply 以确保调用所有观察者。

此外，根据您是否手动将元素添加到 DOM，您将需要使用 $compile 服务进行角度解析并执行元素中的所有指令。

【讨论】：