我有一个范围变量$scope.first_unread_id,它在我的控制器中定义.在我的模板中,我有：
<div id="items" >
<ul class="standard-list">
<li ng-repeat="item in items" scroll-to-id="first_unread_id">
<span class="content">{{ item.content }}</span>
</li>
</ul>
</div>
我的指令看起来像：
angular.module('ScrollToId',[]).
directive('scrollToId',function () {
return function (scope,element,attributes) {
var id = scope.$parent[attributes["scrollToId"]];
if (id === scope.item.id) {
setTimeout(function () {
window.scrollTo(0,element[0].offsetTop - 100)
},20);
}
}
});
然而,它有两个问题：
>是否有更好的方法可以将“first_unread_id”从控制器范围中移除到直接询问范围内.$parent？这看起来有点’icky’.我希望我可以通过视图将其传递给直接作为参数,而不必在ever元素上重复该参数.
>有没有更好的方法来避免需要setTimeout()调用？没有它,它有时会起作用 – 我想是由于布局时间的不同.我理解我使用的语法是定义一个链接函数 – 但是我不清楚这是默认情况下的前置链接还是后置链接 – 如果这对我的问题也很重要.
>您不应该使用范围.$parent – 因为它将继承父作用域中的值,并且当它在父作用域中发生更改时,它将被传递下去.
>默认为后链接功能.您是否有一些图像或某些加载会使页面布局在初始加载后立即更改？您是否尝试过没有时间的setTimeout,例如setTimeout(function(){})？这将确保这将“一个接一个”其他一切完成.
>我还会稍微改变指令的逻辑,使其更通用.如果给定条件为真,我会滚动到元素.
原文链接：https://www.f2er.com/angularjs/143569.html>默认为后链接功能.您是否有一些图像或某些加载会使页面布局在初始加载后立即更改？您是否尝试过没有时间的setTimeout,例如setTimeout(function(){})？这将确保这将“一个接一个”其他一切完成.
>我还会稍微改变指令的逻辑,使其更通用.如果给定条件为真,我会滚动到元素.
以下是这3个变化：
HTML：
<div id="items" >
<ul class="standard-list">
<li ng-repeat="item in items" scroll-if="item.id == first_unread_id">
<span class="content">{{ item.content }}</span>
</li>
</ul>
</div>
JS：
app.directive('scrollIf',attributes) {
setTimeout(function () {
if (scope.$eval(attributes.scrollIf)) {
window.scrollTo(0,element[0].offsetTop - 100)
}
});
}
});
