0

0

AngularJS监听ng-repeat渲染是否完成?这里有问题的过程详情

寻∝梦

寻∝梦

发布时间:2018-09-07 16:57:44

|

1308人浏览过

|

来源于php中文网

原创

本篇文章为介绍一个问题的,当然可能解决一些问题,介绍的是angularjs监听ng-repeat渲染完成的实例,有兴趣的朋友的可以一起来看看。

某个项目,我的网页中有一个列表

    元素,样式如下:

    1.png

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

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

  • ,如下:

    2.png

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

    Cutout.Pro抠图
    Cutout.Pro抠图

    AI批量抠图去背景

    下载

    3.png

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

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

    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,原因不明。会有大神来解答吗?

    本篇文章到这就结束了(想看更多就到PHP中文网AngularJS使用手册中学习),有问题的可以在下方留言提问。

  • 热门AI工具

    更多
    DeepSeek
    DeepSeek

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

    豆包大模型
    豆包大模型

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

    通义千问
    通义千问

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

    腾讯元宝
    腾讯元宝

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

    文心一言
    文心一言

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

    讯飞写作
    讯飞写作

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

    即梦AI
    即梦AI

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

    ChatGPT
    ChatGPT

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

    相关专题

    更多
    2026赚钱平台入口大全
    2026赚钱平台入口大全

    2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

    54

    2026.01.31

    高干文在线阅读网站大全
    高干文在线阅读网站大全

    汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

    40

    2026.01.31

    无需付费的漫画app大全
    无需付费的漫画app大全

    想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

    50

    2026.01.31

    漫画免费在线观看地址大全
    漫画免费在线观看地址大全

    想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

    12

    2026.01.31

    漫画防走失登陆入口大全
    漫画防走失登陆入口大全

    2026最新漫画防走失登录入口合集,汇总多个稳定可用网址,助你畅享高清无广告漫画阅读体验。阅读专题下面的文章了解更多详细内容。

    13

    2026.01.31

    php多线程怎么实现
    php多线程怎么实现

    PHP本身不支持原生多线程,但可通过扩展如pthreads、Swoole或结合多进程、协程等方式实现并发处理。阅读专题下面的文章了解更多详细内容。

    1

    2026.01.31

    php如何运行环境
    php如何运行环境

    本合集详细介绍PHP运行环境的搭建与配置方法,涵盖Windows、Linux及Mac系统下的安装步骤、常见问题及解决方案。阅读专题下面的文章了解更多详细内容。

    0

    2026.01.31

    php环境变量如何设置
    php环境变量如何设置

    本合集详细讲解PHP环境变量的设置方法,涵盖Windows、Linux及常见服务器环境配置技巧,助你快速掌握环境变量的正确配置。阅读专题下面的文章了解更多详细内容。

    0

    2026.01.31

    php图片如何上传
    php图片如何上传

    本合集涵盖PHP图片上传的核心方法、安全处理及常见问题解决方案,适合初学者与进阶开发者。阅读专题下面的文章了解更多详细内容。

    2

    2026.01.31

    热门下载

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

    精品课程

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

    共58课时 | 4.4万人学习

    TypeScript 教程
    TypeScript 教程

    共19课时 | 2.6万人学习

    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 3.1万人学习

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

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