Question

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

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

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

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

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

Answer 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

Answer 2

使用bind（或on）直接侦听事件不会导致角度的摘要周期。您需要在范围上调用$ apply以确保所有观察者都被调用。

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

绑定到多个事件的AngularJS指令

2 个答案: