AngularJS监听ng-repeat渲染完成的方法


Posted in Javascript onMarch 20, 2018

某个项目,我的网页中有一个列表<ul>元素,样式如下:

AngularJS监听ng-repeat渲染完成的方法

实际上它是通过Angular的ng-repeat形成的,html中的代码是:

<li ng-repeat="for list in lists()" id="{{ list.id }}">{{ list.name }}</li>

图中下方的新建清单button,点击之后就往lists数组中push了一个新的list对象,此时页面会自动渲染,也对应增加一个<li>,如下:

AngularJS监听ng-repeat渲染完成的方法

注意MyList1一直是active状态的(class="active"),我的需求是新增list后,把新增的list设置为active,即在新增后就变成下面这种样式:

AngularJS监听ng-repeat渲染完成的方法

刚开始我尝试在button对应的函数中,往lists数组中push了新的list对象后,使用document.getElementById获取到新增的<li>对象,然后为其添加一个class="active",结果发现获取到的DOM对象为null,经过搜索发现原因是:往lists数组push对象后,数组发生改变,所有的<li>都会重新渲染,在push完成之后马上去找新增的DOM对象,DOM还没渲染好,因此是获取不到的。解法是:使用AngularJS的指令去监听ng-repeat是否渲染完成,在渲染完成后,再去取新增的<li>对象,这个网上有很多相关的内容了,代码如下:

myapp.directive('repeatFinish', function ($timeout) {
  return {
    restrict: "C",
    link: function (scope, element, attr) {
      if(scope.$last === true){
        $timeout(function () {
          scope.change_list(element[0]);
        }, 10);
      }
    }
  }
});

上述代码建立了一个名为repeatFinish的指令,restrict: "C"表示指令放在DOMclass中(驼峰形式,即class="repeat-finish"),scope.$last === true表示已经渲染到了最后一个对象,此时执行change_list函数(定义在控制器中,功能是把当前active的对象取消active,然后设置传入的DOM对象为active),element[0]可以直接取到当前渲染的DOM元素。注意我使用了$timeout10ms后执行change_list,我发现直接使用change_list还是会找不到DOM,原因不明,期待大神解答。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 #Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 #Javascript
解决vue-router中的query动态传参问题
Mar 20 #Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 #Javascript
手写Node静态资源服务器的实现方法
Mar 20 #Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 #Javascript
react-native封装插件swiper的使用方法
Mar 20 #Javascript
You might like
PHP XML备份Mysql数据库
2009/05/27 PHP
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
求职推荐信
2013/10/28 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
表彰先进的通报
2014/01/31 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
卖车协议书
2014/04/21 职场文书
索赔员岗位职责
2015/02/15 职场文书
文明旅游倡议书
2015/04/28 职场文书
MySQL基础(二)
2021/04/05 MySQL
Python实现生活常识解答机器人
2021/06/28 Python
详解PyTorch模型保存与加载
2022/04/28 Python