zoukankan      html  css  js  c++  java
  • angular diretive中 compile controller link的区分及编译顺序

    指令比较糊涂,今天查了查,首先上代码吧(程序员 coding and think deeply);

    <!DOCTYPE html>
    <html lang="en" ng-app='myApp'>
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <script type="text/javascript" src='angular.min.js'></script>
    </head>
    <body>
      <div  ng-controller='firstController'>
           {{name}}
           <exp-directive></exp-directive>
      </div>
      <script type="text/javascript">
          var app = angular.module('myApp',[]);
          app.controller('firstController',['$scope',function($scope){
                  $scope.name = 'controller name';
                  console.log('moule controller')
          }])
    
          app.directive('expDirective',function(){
               return {
                 restrict:'AE',
                 template:'<p>hello {{name}} </p>',
                 replace: true, 
                 compile: function(){
                      console.log('complie start')
                     return {
                    pre: function preLink(scope, element, attributes) {  
                          console.log("pre directive "); 
                    },  
                    post: function postLink(scope, element, attributes) {  
                           console.log("linker directive") ;  
                    } 
                     }
                 },
                 link: function(scope){
                       console.log('derictive link')
                 },
                  controller: function($scope){
                       $scope.name = 'directive controller name'
                      console.log('dertive controller')
                 }
               }
          })
    
      </script>
    </body>
    </html>
    

       浏览器:  directive controller name

                     hello directive controller name

      控制台(console.log):

                    complie start
                    moule controller
                    dertive controller
                    pre directive
                    linker directive

      从浏览器看directive controller污染了 module controller 内的内容,所有尽量少用controller,用link,一般用在需要require,指令之间的调用时用到(这个是在网上看到未验证);

      从控制台来说

            1. 当有complie 时link是不起作用的,注释complie之后link才会起作用。

            2.complie编译时编译之前的,之后编译module controller的内容,再编译directive内容( controller 优先级大于 link)。

       最后我把最终的编译顺序按自己理解的写一遍

        ng-app -- ng-controller -- directive指令 -- complie编译 -- complie start --  module controller -- directive controller  (如果没有complie, directive link 在 directive controller 后面)

       我有一个猜测:

           complie里可能有directive controller的回调函数,并且在pre 和 post之前,而link不执行说明link是complie的一部分,不存在回调;

          声明个人想法不一定全对:有错误的话,多谢指正;

                这个链接讲的很详细(英文的)

  • 相关阅读:
    Sql的同一机器不同数据库联合查询示例
    poi 公式自動重新計算
    js 取得文件大小
    java 读写文件
    Postman安装及入门实践(以百度搜索为例)
    PostmanTests模块测试方法记录
    HTML颜色代码
    网盘搜索器 v1.0
    线程知识点一:如何传入多个参数
    asp.net 实现省市级联<简单方法2>前台实现
  • 原文地址:https://www.cnblogs.com/haijson/p/6702976.html
Copyright © 2011-2022 走看看