ng指令中controller与link的区别

逃离我推掉我的手 2022-04-06 11:10 207阅读 0赞

**一.指令中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>
    
    
    <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;
    }

运行结果：

![8253fc7f-37f1-329c-a682-6bc40ba91f5e.png][]

通过这个实例，我们可以知道，子级指令的所有 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

运行结果：

![4c0e51fd-9e35-38c8-86b0-da134ab7f46b.png][]

说明 link 在 ctrl 之后执行的一个例子，上面这个例子非常给力，值得学习。

文章来源：[http://www.angularjs.cn/A0nR][http_www.angularjs.cn_A0nR]

[8253fc7f-37f1-329c-a682-6bc40ba91f5e.png]: /images/20220406/b0c76de11778470287ca1f07be4f43e0.png
[4c0e51fd-9e35-38c8-86b0-da134ab7f46b.png]: /images/20220406/29b63870fe854cf7aa71dc795c92fb5e.png
[http_www.angularjs.cn_A0nR]: http://www.angularjs.cn/A0nR