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 相关文章推荐
JS命名空间的另一种实现
Aug 09 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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命名空间(Namespace)简明教程
2014/06/11 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
JavaScript延迟加载
2021/03/09 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
用Python编写简单的定时器的方法
2015/05/02 Python
神经网络python源码分享
2017/12/15 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
升旗仪式演讲稿
2014/05/08 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
活动总结格式
2014/08/30 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
校园运动会广播稿
2014/10/06 职场文书
初中班主任培训心得体会
2016/01/07 职场文书