• 技术文章 >web前端 >js教程

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

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

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

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

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

    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

    可以看出:

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

    <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中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:angular preLink postLink
    上一篇:浅谈Nodejs中的callback回调 下一篇:JavaScript中解析parseInt()的怪异行为
    第16期线上培训班

    相关文章推荐

    • 详解Angular中的模板输入变量(let-变量)• Angular如何创建服务?5种方式了解一下!• 浅谈Angular中导入本地JSON文件的方法• 详解angular中为HTML元素添加css类的几种方式• 浅谈angular指令中的4种设计模式

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网