首页 >web前端 >js教程 > 正文

聊聊angular指令中的preLink和postLink函数

转载2021-05-19 10:08:2301325
本篇文章给大家介绍一下angular指令中的preLink和postLink函数。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

【相关推荐:《angular教程》】

指令模板选项有complie和link两个字段,两者之间存在如下关系:

  • 当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段。
  • 当compile不存在,link字段存在时,angular通过这样directive.compile = valueFn(directive.link);包装一层,使用用户定义的link字段。

而link分为preLink和postLink两个阶段,从link字段或者compile函数的返回值来看:

  • 如果是函数,那么这样的link,会被认为是postLink。
  • 如果是对象,那么link.pre作为preLink函数,link.post作为postLink函数。
app.directive('myDirective', function () {
  return {
      compile: function () {
          return {
              pre: function () {
                  console.log('preLink');
              },
              post: function () {
                  console.log('postLink');
              }
          }
      }
  }
});

我们的指令工厂返回的是一个函数,那么angular通过这样的包装 directive = { compile: valueFn(directive) },即该函数将作为指令对象的postLink函数,像这样:

app.directive('myDirective', function () {
  return function () {
    console.log('postLink');
  }
});

angular编译链接指令的顺序

为了看清angular编译链接指令的顺序,用以下代码输出日志的方式来说明:

<body ng-app="myApp">
    <A a1>
        <B b1 b2></B>
        <C>
            <E e1></E>
            <F>
              <G></G>
            </F>
        </C>
        <D d1></D>
    </A>
</body>
 
var app = angular.module('myApp', []);
var names = ['a1', 'b1', 'b2', 'e1', 'd1'];
 
names.forEach(function (name) {
  app.directive(name, function () {
    return {
        compile: function () {
             console.log(name + ' compile');
            return {
                pre: function () {
                    console.log(name + ' preLink');
                },
                post: function () {
                    console.log(name + ' postLink');
                }
            };
        }
    };
  });
});

输出:

a1 compile
b1 compile
b2 compile
e1 compile
d1 compile
a1 preLink
b1 preLink
b2 preLink
b2 postLink
b1 postLink
e1 preLink
e1 postLink
d1 preLink
d1 postLink
a1 postLink

可以看出:

  • 所有的指令都是先compile,然后preLink,然后postLink。

  • 节点指令的preLink是在所有子节点指令preLink,postLink之前,所以一般这里就可以通过scope给子节点传递一定的信息。

  • 节点指令的postLink是在所有子节点指令preLink,postLink完毕之后,也就意味着,当父节点指令执行postLink时,子节点postLink已经都完成了,此时子dom树已经稳定,所以我们大部分dom操作,访问子节点都在这个阶段。

  • 指令在link的过程,其实是一个深度优先遍历的过程,postLink的执行其实是一个回溯的过程。

  • 节点上的可能有若干指令,在搜集的时候就会按一定顺序排列(通过byPriority排序),执行的时候,preLinks是正序执行,而postLinks则是倒序执行。

明白了这些以后,就要小心一些容易忽略的陷阱。

<body ng-app="myApp">
    <my-parent></my-parent>
</body>
 
var app = angular.module('myApp', []);
 
app.directive('myParent', function () {
    return {
        restrict: 'EA',
        template: '<div>{{greeting}}{{name}}'+
        '<my-child></my-child>'+
        '</div>',
        link: function(scope,elem,attr){
            scope.name = 'Lovesueee';
            scope.greeting = 'Hey, I am ';
        }
    };
});
app.directive('myChild', function () {
    return {
        restrict: 'EA',
        template: '<div>{{says}}</div>',
        link: function(scope,elem,attr){
            scope.says = 'Hey, I am child, and my parent is ' + scope.name;
        }
    };
});

结果子指令输出为undefined

Hey, I am Lovesueee
Hey, I am child, and my parent is undefined

由上可以,myParent指令的link是一个postLink函数,而这个函数将在myChild指令的preLink和postLink执行完之后才执行。所以scope.name = undefined。

更多编程相关知识,请访问:编程入门!!

以上就是聊聊angular指令中的preLink和postLink函数的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除

  • 相关标签:angular preLink postLink
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    php怎么实现base64加密734
    php不支持mysql_query()吗319
    windows下怎么安装php环境143
    推荐视频教程
  • 极客学院AngularJS视频教程极客学院AngularJS视频教程
  • 小猫杯AngularJS视频教程小猫杯AngularJS视频教程
  • angular.js中文教学视频教程angular.js中文教学视频教程
  • AngularJS开发Web应用程序基础实例视频教程AngularJS开发Web应用程序基础实例视频教程
  • 视频教程分类