AngularJS：我应该转换指令的功能链接到控制器？ [英] AngularJS: Should I convert directive's linking function to a controller?

问题描述

我听说这是使用 controllerAs 语法 bindToController沿着一个很好的做法：使用一个真正的的指令隔离范围。参考文献：<一href=\"http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html\">one, <一href=\"https://www.airpair.com/angularjs/posts/$p$pparing-for-the-future-of-angularjs#3-3-match-controllers-with-directives\">two

I heard it's a good practice to use the controllerAs syntax along with bindToController: true in directives that use an isolate scope. References: one, two

假设，我有这样的指令：

Suppose, I have a directive like this:

angular.module('MyModule').directive('MyDirective', function(User) {
  return {
    scope: {
      name: '='
    },
    templateUrl: 'my-template.html',
    link: function(scope) {
      scope.User = User;
      scope.doSomething = function() {
        // Do something cool
      };
    }
  };
});

<!-- my-template.html -->
<div>
  User Id: {{ User.id }}
  Name: {{ name }}
  <button ng-click="doSomething()">Do it</button>
</div>

正如你所看到的，有在这个指令没有控制器。但是，为了能够利用 controllerAs 和 bindToController：真正的我必须有一个控制器

时的链接功能转换到控制器的最佳做法是什么？

Is the best practice to convert the linking function to a controller?

angular.module('MyModule').directive('MyDirective', function(User) {
  return {
    scope: {
      name: '='
    },
    templateUrl: 'my-template.html',
    bindToController: true,
    controllerAs: 'myCtrl',
    controller: function() {
      this.User = User;
      this.doSomething = function() {
        // Do something cool
      };
    }
  };
});

<!-- my-template.html -->
<div>
  User Id: {{ myCtrl.User.id }}
  Name: {{ myCtrl.name }}
  <button ng-click="myCtrl.doSomething()">Do it</button>
</div>

我的理解是，指令的控制器应作为一种机制来揭露指令的API的指令到指令沟通。

My understanding is that directive's controller should be used as a mechanism to expose directive's API for a directive-to-directive communication.

任何人都可以阐明什么是最好的做法，这些天，考虑到有角2.0？

Could anyone shed light on what's the best practice these days, having Angular 2.0 in mind?

推荐答案

我认为移动初始化code和/或露出里面一个指令的控制器的API函数的最佳实践，因为它有两个目的：

I consider it best practice to move initialization code and/or exposing API functions inside of a directive's controller, because it serves two purposes:

1. Intialization of $scope 
2. Exposing an API for communication between directives

范围的初始化

假设你的指令定义一个子范围（或继承范围内）。如果初始化链接功能的范围内，那么子作用域将无法访问通过继承范围此处定义的任何范围内的变量。这是因为父链接功能的子链接功能后，始终执行。出于这个原因，对于范围初始化的适当位置是在控制器的功能的内部。

Initialization of Scope

Suppose your directive defines a child scope (or inherits scope). If you initialize scope inside of your link function, then child scopes will not be able to access any scope variables defined here through scope inheritance. This is because the parent link function is always executed after the child link function. For this reason, the proper place for scope initialization is inside of the controller function.

儿童指令可以通过指令定义对象的'要求'属性访问父指令的控制器。这使得指令进行通信。为了使这项工作，在父控制器必须完全定义，以便它可以从子指令的链接功能来访问。实现这一点，最好的地方是在控制器的功能本身的定义。家长控制功能之前，孩子控制器的功能总是叫。

Child directives can access the parent directive's controller through the 'require' property on the directive definition object. This allows directives to communicate. In order for this to work, the parent controller must be fully defined, so that it can be accessed from the child directive's link function. The best place to implement this is in the definition of the controller function itself. Parent controller functions are always called before child controller functions.

要理解，链接功能和控制器功能有两个非常不同的目的是很重要的。该控制器的功能是专为初始化和指令的沟通和连接功能是专为运行时行为。根据您的code的意图，你应该能够决定它是否属于在控制器，或者它属于连接器。

It is important to understand that the link function and the controller function serves two very different purposes. The controller function was designed for initialization and directive communication, and the linker function was designed for run-time behavior. Based on the intent of your code, you should be able to decide whether it belongs in the controller, or it belongs in the linker.

如果您移动任何code从链接功能到控制器函数初始化范围？

是的，这是该控制器功能存在的主要原因之一：初始化范围，并允许其范围参与原型范围继承。

Yes, that is one of the primary reasons that the controller function exists: to initialize scope, and allow its scope to participate in prototypical scope inheritance.

如果您从链接功能控制器功能移至$表处理程序？

没有。链路功能的目的是来装行为和潜在操作DOM。在链接功能，所有指令都被编译，所有的子链接功能已经执行。这使它成为理想的地方来装行为，因为它是接近DOM准备好，因为它可以（这是不是真正的DOM已准备就绪，直到呈现阶段之后）。

No. The purpose of the link function is to hookup behavior and potentially manipulate the DOM. In the link function, all directives have been compiled, and all child link functions have already executed. This makes it an ideal place to hookup behavior because it is as close DOM ready as it can be (it is not truly DOM ready until after the Render phase).

这篇关于AngularJS：我应该转换指令的功能链接到控制器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！