angularjs – 滚动到给定项目的角度指令
发布时间:2020-12-17 08:41:07 所属栏目:安全 来源:网络整理
导读:我有一个作用域变量$ 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
我有一个作用域变量$ 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”从控制器范围直接到询问范围。这似乎有点“icky”。我希望我可以通过视图直接作为一个参数w / o必须重复的li元素。
>你不应该需要范围$ parent – 因为它将继承父范围的值,当它在父范围中更改时,它将被向下传递。
>默认是后链接功能。你有一些图像或东西加载,将使页面布局在初始加载后不久更改?你试过一个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) } }); } }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- angularjs – Angular-ui的工具提示无法在ng-grid中正确显示
- Axis开发WebService(二)
- twitter-bootstrap – Twitter Bootstrap – 顶部导航栏阻止
- 使用Angular 2的Jade / Pug – 如何解决与#syntax的冲突?
- scala – Json4s忽略了@JsonProperty jackson注释
- 单元测试 – 如何在play framework 2 scala中对控制器进行单
- Cakestp ClassRegistry :: init in bootstrap
- WebService入门-WebService跨程序调用
- CXF生成webservice客服端代码
- 在Vim中进行换行