ng指令中controller与link的区别

前端之家收集整理的这篇文章主要介绍了ng指令中controller与link的区别前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

运行结果:

  通过这个实例,我们可以知道,子级指令的所有 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>',$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,attr){
      // some awesome jquery pluggin which replaces things and bits
      $element.replaceWith(angular.element('<pre>' +  $element.text() + '</pre>'));
    }
  }
});

运行结果:

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

文章来源:http://www.angularjs.cn/A0nR

原文链接:https://www.f2er.com/angularjs/146112.html

猜你在找的Angularjs相关文章