0

0

如何使用AngularJS监听渲染

php中世界最好的语言

php中世界最好的语言

发布时间:2018-06-14 15:33:47

|

1599人浏览过

|

来源于php中文网

原创

这次给大家带来如何使用AngularJS监听渲染,使用AngularJS监听渲染的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

  • ,如下:

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

    刚开始我尝试在button对应的函数中,往lists数组中push了新的list对象后,使用document.getElementById获取到新增的

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

    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);
          }
        }
      }
    });

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    JS做出鼠标经过文字时弹出悬浮层特效

    RecoveryFox AI
    RecoveryFox AI

    AI驱动的数据恢复、文件恢复工具

    下载

    如何使用Angular组件交互

  • 热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    c语言中null和NULL的区别
    c语言中null和NULL的区别

    c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

    236

    2023.09.22

    java中null的用法
    java中null的用法

    在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

    458

    2024.03.01

    class在c语言中的意思
    class在c语言中的意思

    在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

    469

    2024.01.03

    python中class的含义
    python中class的含义

    本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

    13

    2025.12.06

    js正则表达式
    js正则表达式

    php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

    514

    2023.06.20

    js获取当前时间
    js获取当前时间

    JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

    244

    2023.07.28

    js 字符串转数组
    js 字符串转数组

    js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

    298

    2023.08.03

    js是什么意思
    js是什么意思

    JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

    5306

    2023.08.17

    俄罗斯Yandex引擎入口
    俄罗斯Yandex引擎入口

    2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

    158

    2026.01.28

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    PostgreSQL 教程
    PostgreSQL 教程

    共48课时 | 8万人学习

    MongoDB 教程
    MongoDB 教程

    共17课时 | 2.4万人学习

    ASP 教程
    ASP 教程

    共34课时 | 4.2万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号