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 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
wordpress之js库集合研究介绍
Aug 17 Javascript
javascript xml为数据源的下拉框控件
Jul 07 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
php之XML转数组函数的详解
2013/06/07 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
Python深入学习之装饰器
2014/08/31 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
Python 面试中 8 个必考问题
2018/11/16 Python
python取均匀不重复的随机数方式
2019/11/27 Python
Python通过文本和图片生成词云图
2020/05/21 Python
浅谈Python 函数式编程
2020/06/20 Python
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
Shell编程面试题
2016/05/29 面试题
项目经理岗位职责
2013/11/11 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers