ng指令中controller与link的区别

程序员文章站 2022-05-31 10:30:55

...

一.指令中controller与link的区别

　　我们都知道在ng的指令中，返回的对象中有两个重要的属性：

// link function
{
    link: function(scope, iElem, iAttrs, ctrl) { ... },
    controller: function($scope, $element, $attrs) { ... }
}

　　这两个都可以获取到作用域，元素，属性等引用，也都会执行一次，在我还是个ng菜鸟的时候，当然，现在也还是，当我每次想要扩展个自定义指令时，脑海中总是萦绕着“where the fuck should I put my code?”，在controller，还是link function中呢。

　　简短的回答是：优先放在 link function 中。当然啦，这要取决于你想要你的代码什么时候运行。

Before compilation? – Controller
After compilation？ - Link function

　　另外，他们的基本区别是：

　　a.控制器可以暴露一个API，而link可以通过require与其他的指令控制器交互

　　b.所以如果要开放出一个API给其他指令用就写在controller中，否则写在link中

二.执行先后问题

　　首先，看下面一个很有趣的示例：log-compile指令。

index.html

<!doctype html>
<html ng-app="compilation">
<head>
  <meta charset="utf-8">
  <title>Compilation Demo</title>
  <link rel="stylesheet" href="style.css">
  <script src="http://code.angularjs.org/1.1.1/angular.js"></script>
  <script src="app.js"></script>
</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>
</body>
</html>

app.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
  };
});

style.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;
}

运行结果：

ng指令中controller与link的区别

博客分类： AngularJS AngularJScontrollerlink

　　通过这个实例，我们可以知道，子级指令的所有 link function ：包括 pre 和 post 两个link都会在父级的post link之前被执行，我们通常所说的link function，其实是 post link 的快捷方式罢了。

　　所以，像下面这个例子中，这样用，是会有问题的：

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://code.angularjs.org/1.1.5/angular.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <example-directive></example-directive> 
    (above should actually say "hi there", not "bar")
  </body>

</html>

app.js

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

app.controller('MainCtrl', function($scope, $element) {
});

app.directive('exampleDirective', function() {
  return {
    restrict: 'E',
    template: '<child-directive></child-directive>',
    controller: function($scope, $element){
      // this will not work, since the child directives link 
      // function was not yet run
      $element.find('pre').text('hi there!');
    },
    link: function(scope, el){
      // the logic really belongs in link, as the child directive
      // uncomment this line to fix the problem
      // el.find('pre').text('hi there!')
    }
  }
});

app.directive('childDirective', function() {
  return {
    restrict:  'E',
    template: '<h1>bar</h1>',
    replace: true,
    link: function($scope, $element, attr){
      // some awesome jquery pluggin which replaces things and bits
      $element.replaceWith(angular.element('<pre>' +  $element.text() + '</pre>'));
    }
  }
});

运行结果：

ng指令中controller与link的区别

博客分类： AngularJS AngularJScontrollerlink