控制angularjs的directive在DOM渲染完成后执行

scq000 发布于2019-08-19 17:20 / 2962人阅读

摘要：问题创建一个名叫的，在函数中对数据进行格式化。但是函数执行时，绑定的数据还没有生效，依然是模板形式，如这种。这样操作就必定位于数据绑定事件之后。加上后，才能生效。

问题

创建一个名叫format的directive，在link函数中对数据进行格式化。数据是通过data-binding从scope传过来的。
但是link函数执行时，绑定的数据还没有生效，依然是模板形式，如{{f.name}}这种。如果需要在数据绑定后再执行directive，该怎么办？

解决方案

link函数执行时，数据绑定的相关事件已经存放在队列中了，因此把format操作放到timeout函数中即可。这样format操作就必定位于数据绑定事件之后。

核心代码

具体代码见 codepen

directive的link函数如下：

directive("format", ["$timeout", function(timer) {
    return {
      link: function($scope, elem, attr) {
        timer(function() {
          var val = elem.text();
          console.log(val);
          var val = parseFloat(val);
          if (val !== val) {
            return
          }
          elem.text(val.toFixed(3));
        }, 0);
      },
      restrict: "A",
    }
  }]);

可以尝试去掉timer看看效果，此时console中打出的日志条数和scope中的数组长度是一样的，说明dom结构已经渲染好了，但是数据没有绑定好，因此format没有生效。
加上timer后，format才能生效。

GPU云服务器云服务器 DOM渲染数据angularjs控制台完成后安装完成后

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78434.html

控制angularjs的directive在DOM渲染完成后执行

摘要：问题创建一个名叫的，在函数中对数据进行格式化。但是函数执行时，绑定的数据还没有生效，依然是模板形式，如这种。这样操作就必定位于数据绑定事件之后。加上后，才能生效。问题创建一个名叫format的directive，在link函数中对数据进行格式化。数据是通过data-binding从scope传过来的。但是link函数执行时，绑定的数据还没有生效，依然是模板形式，如{{f.name}...

microcosm1994 2019-08-01 14:59 评论0 收藏0
AngularJs功能（六）--指令

摘要：事件只针对输入框值的真实修改，而不是通过来修改。指令将给定表达式的值替换元素的内容。指令还有另外一种转换方式，如果你有字符串数组希望在输入框中显示，你可以在上使用指令。指令 Directive 指令系统（Directive）是Angular应用的一个重要特性。是通过对DOM元素的标签丶属性来增强HTML表现力，为其增加一些特定功能。本篇参考文档Angular菜鸟教程内置指令这里...

Mertens 2019-08-22 13:59 评论0 收藏0
AngularJS监听ng-repeat渲染完成

摘要：注意我使用了，后执行，我发现直接使用还是会找不到，原因不明，期待大神解答。某个项目，我的网页中有一个列表元素，样式如下： showImg(https://segmentfault.com/img/bV53Si?w=155&h=230); 实际上它是通过Angular的ng-repeat形成的，html中的代码是： {{ list.name }} 图中下方的新建清单button，点击之...

tianren124 2019-08-26 11:49 评论0 收藏0
angularJS directive用法详解

摘要：可选参数，布尔值或者对象默认值为，可能取值默认值。布尔值或者字符，默认值为这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。前言最近学习了下angularjs指令的相关知识，也参考了前人的一些文章，在此总结下。欢迎批评指出错误的地方。 Angularjs指令定义的API showImg(https://segmentfault.com/img...

hlcc 2019-08-20 11:09 评论0 收藏0
理解和学习AngularJS（一）

摘要：为指令赋值函数名，即可运行。它也是一个对象，指向应用程序作用域内的所有元素和执行上下文。简而言之，是与指令元素相关联的当前作用域，可以理解为视图和控制器间的一个通道。它们被组织为模块形式，之后可以被另一个引用。 Angularjs Angular是一款主旋律的MVVM框架，框架和传统的库不同：类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类...

EastWoodYang 2019-08-22 10:58 评论0 收藏0