angularjs学习系（2）

最新推荐文章于 2018-11-09 09:16:48 发布

原创最新推荐文章于 2018-11-09 09:16:48 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

angularjs 专栏收录该内容

3 篇文章

订阅专栏

本文通过两个示例详细解析了AngularJS中指令的执行顺序，包括controller、compile、pre-link和post-link等阶段，并展示了这些阶段如何交互以完成视图与控制器之间的数据绑定。

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代码：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'First ';
});

app.directive('exampledirective1', function() {
  return {
    restrict: 'EACM',
    template: '<p>Hello {{name}}!</p>',
	replace:true,
    controller: function($scope, $element){
      $scope.name = $scope.name + "Second ";
    },
    link: function(scope, el, attr) {
      scope.name = scope.name + "Third ";
    }
  }
});

最终输出 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>

<!-- LOG -->
<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）