angularjs学习系（2）

野性酷女 2022-08-07 10:43 62阅读 0赞

angularjs 的controller和directive 的controller，link的执行顺序

看模板代码：

<!doctype html>
    <html ng-app='plunker'> 
     <head>   
    
     </head> 
     <body>     
      
     <div ng-controller="MainCtrl">  
       
         <exampledirective1></exampledirective1>
    </div> 
     
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="main.js"></script>
    </body></html>

注意：自定义指令不能大写（或大小写），全部小写字母（可以带数字）

js代码：

最终输出 hello first second third

二：下面这个示例更加详细清晰的阐述 指令执行内部的流程：

模板代码：

<!doctype html>
    <html ng-app="compilation">
    <head>
      <meta charset="utf-8">
      <title>Compilation Demo</title>
      <style type="text/css">
         div {
      padding: 5px;
      margin: 5px;
      background-color: #EEE;
      border: 1px solid #BBB;
    }
    
    div > div {
      background-color: #DDD;
    }
    
    div > div > div {
      background-color: #CCC;
    }
    
    ol {
      list-style: decimal;
      margin-left: 30px;
    }
      </style>
      
    </head>
    <body>
    <div log-compile="parent">
      <div log-compile="..child 1">
        <div log-compile="....child 1 a"></div>
        <div log-compile="....child 1 b"></div>
      </div>
      <div log-compile="..child 2">
        <div log-compile="....child 2 a"></div>
        <div log-compile="....child 2 b"></div>
      </div>
    </div>
    
    
    <pre>{
       {log}}</pre>
    <script src="angular.js"></script>
      <script src="main09.js"></script>
    </body>
    </html>

js代码：

angular.module('compilation', []).directive('logCompile', function($rootScope) {
      $rootScope.log = "";
    
      return {
        controller: function($scope, $attrs) {
          $rootScope.log = $rootScope.log + ($attrs.logCompile + ' (controller)\n');
        },
        compile: function compile(element, attributes) {
          $rootScope.log = $rootScope.log + (attributes.logCompile + ' (compile)\n');
          return {
            pre: function preLink(scope, element, attributes) {
              $rootScope.log = $rootScope.log + (attributes.logCompile + ' (pre-link)\n');
            },
            post: function postLink(scope, element, attributes) {
              element.prepend(attributes.logCompile);
              $rootScope.log = $rootScope.log + (attributes.logCompile + ' (post-link)\n');
            }
          };
        }
      };
    })
    
    .directive('terminate', function() {
      return {
        terminal: true
      };
    });

从输出的结果便可以看出，先complie元素，再Link执行（controller -> pre-link -> post-link）