angularjs 渲染页面时,有时需要根据远程接口返回的数据结构来渲染:
请求远程数据--》数据模型变化--》angularjs监控到模型变化--》重新渲染页面。
那么有时需要在有数据且页面被渲染完成后,再执行某个方法,如:
semnatic 的 accrodion:
<div class="ui accordion"> <div class="active title"> <i class="dropdown icon"></i> 菜单名称 </div> <div class="active content"> <ul > <li><a href="">菜单1</a> <li><a href="">菜单2</a> <li><a href="">菜单3</a> <li><a href="">菜单4</a> </ul> </div> <div class=" title"> <i class="dropdown icon"></i> 菜单名称 </div> <div class=" content"> <ul > <li><a href="">菜单1</a> <li><a href="">菜单2</a> <li><a href="">菜单3</a> <li><a href="">菜单4</a> </ul> </div> </div> <script> $('.ui.accordion') .accordion(); </script>
需要执行accordion 方法才能显示出来。
通常菜单由数据来决定,改为angularjs 实现为:
<div ng-if="userModel.menuList.length>0" class="ui accordion " > <div ng-repeat="menuDir in userModel.menuList" > <div class="{{$first?'active':''}} title"> <i class="dropdown icon"></i> {{menuDir.menuName}} </div> <div class="{{$first?'active':''}} content"> <ul ng-repeat="menu in menuDir.childrens"> <li ><a ui-sref="/views/{{menu.menuUrl}}"> {{menu.menuName}}</a></li> </ul> </div> </div> </div>
页面在加载完后台数据,生成userModel.menuList数据,angularjs 监控到userModel.menuList数据变化,再渲染页面,在这执行完成后,再执行$('.ui.accordion') .accordion();,才能渲染出accordion校果。
那么如何实现在页面angularjs 渲染完成后,再执行方法呢?
一种指令实现的方式:
.directive('OnReanderFinsh',[function(){ return { restrict:'A', link:function ($scope, element, attrs, controller) { var fun = $scope.$eval(attrs.OnReanderFinsh);//计算表达式的值 if(fun && typeof(fun)=='function'){ fun(); } } }; }]);
html页中引入指令的js,在 ng-repeat一行中修改:
<div ng-repeat="menuDir in userModel.menuList" on-reander-finsh="renderAccordion">
controller中修改:
$scope.renderAccordion = function (){ $('.ui.accordion') .accordion(); };
就是利用了一个指令完成(ng-repeat 渲染完成),再执行下一个指令的渲染顺序,来实现的。
相关推荐
指令是angular的核心功能之一,用好了事半功倍,监听ng-repeat执行状态仅仅是它功能的冰山一角吧。下面这篇文章主要介绍了Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法,需要的朋友可以参考下。
渲染数组某个元素渲染数组某个元素渲染数组某个元素渲染数组某个元素渲染数组某个元素渲染数组某个元素渲染数组某个元素渲染数组某个元素渲染数组某个元素渲染数组某个元素渲染数组某个元素渲染数组某个元素渲染数组...
angular-progress-arc, 用于显示循环进度表的AngularJS指令 angular-progress-arc一个 AngularJS 显示循环进度表的指令。 演示工具特性显示循环进度表。使用SVG进行渲染。可以调整尺寸,颜色和厚度。在AngularJS之外...
angularjs,ng-repeat循环渲染时,无法获取dom对象
vue监听数据渲染DOM完以后执行某个函数详解 开发技术.zip
AngularJS指令口袋参考指令允许我们通过可重用HTML元素,属性和类来扩展Web语法。...资源了解指令AngularJS指令揭秘指令创建自定义指令$编译 指令到指令通信指令性交流-第一部分指令性交流-第二部分
项目使用 angularJS ui-router-tabs angular-ui-router 实现tab页切换, 1、亮点 1)tab页间切换缓存tab页数据 2)刷新页面,保留已经打开的tab页,当前活动tab为上次活动的tab 3)使用嵌套路由,实现单页面应用
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作,这几天就一直遇到在列表和表格渲染完毕后,执行点击和选择操作。对于angularjs处理这类问题,最好的方式就是指令 directive。 首先,定义指令: ...
angular-virtual-dom angular-virtual-dom 是一个实验性的基于的 AngularJS 视图渲染器,设计用于不可变数据结构,例如和 。 angular-virtual-dom 允许您使用常规的 AngularJS 模板和表达式将数据绑定到 DOM,但在...
主要介绍了AngularJS监听ng-repeat渲染完成的两种方法,结合实例形式分析了AngularJS基于自定义指令及广播事件实现监听功能的相关操作技巧,需要的朋友可以参考下
本文介绍Angularjs渲染的 using 指令的星级评分系统示例,分享给大家,具体如下: 我试图创建静态使用 angularjs/离子成效甚微的星级评分系统。但目前什么都不输出到屏幕上……我是我做错了吗? service.html ...
今天小编就为大家分享一篇Vue在页面数据渲染完成之后的调用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
quick-ng-repeat, 一个更快速的替换AngularJS的重复指令 的AngularJS指令更快速地列出渲染特性浅表表( ngRepeat使用深表)动画支持特殊服务,使列表呈现在摘要循环之外在重compited列表中平滑滚动( 检查示例)大约 200...
他也对Angular UI (AngularJS的配套框架)有所贡献,并为AngularJS 提供了Twitter Bootstrap 相关的指令(directives)。不写代码时,Pawel 常在会议与活动上为AngularJS布道。 Peter Bacon Darwin已经积累了20年...
##ngDropdownTreeview 用于显示多级下拉菜单的轻量级 Angular JS 指令。 用法 : <ng items='items'></ng>在ng-dropdown-treeview指令的items属性中传递您的对象。
今天小编就为大家分享一篇Vue监听数据渲染DOM完以后执行某个函数详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
本文详细介绍了从页面开始加载到页面渲染完毕过程中,AngularJS执行了哪些操作,有需要的小伙伴可以参考下
某个项目,我的网页中有一个列表元素,样式如下: 实际上它是通过Angular的ng-repeat形成的,html中的代码是: <li ng-repeat=for id={{>{{ list.name }} 图中下方的新建清单button,点击之后就往lists数组中push...