AngularJS:我应该将指令的链接功能转换为控制器吗?

Mis*_*hko 16 angularjs angularjs-directive angularjs-controller

我听说在使用隔离范围的指令中使用controllerAs语法是一个好习惯bindToController: true.参考文献:,

假设,我有这样的指令:

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
      };
    }
  };
});
Run Code Online (Sandbox Code Playgroud)
<!-- my-template.html -->
<div>
  User Id: {{ User.id }}
  Name: {{ name }}
  <button ng-click="doSomething()">Do it</button>
</div>
Run Code Online (Sandbox Code Playgroud)

如您所见,此指令中没有控制器.但是,为了能够利用controllerAs,bindToController: true我必须有一个控制器.

将链接功能转换为控制器是最佳做法吗?

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
      };
    }
  };
});
Run Code Online (Sandbox Code Playgroud)
<!-- my-template.html -->
<div>
  User Id: {{ myCtrl.User.id }}
  Name: {{ myCtrl.name }}
  <button ng-click="myCtrl.doSomething()">Do it</button>
</div>
Run Code Online (Sandbox Code Playgroud)

我的理解是指令的控制器应该用作暴露指令的API的机制,用于指令到指令的通信.

有没有人能够了解一下目前最好的做法是什么,考虑到Angular 2.0?

pix*_*its 14

我认为最好的做法是在指令的控制器中移动初始化代码和/或公开API函数,因为它有两个目的:

1. Intialization of $scope 
2. Exposing an API for communication between directives
Run Code Online (Sandbox Code Playgroud)

范围的初始化

假设您的指令定义子范围(或继承范围).如果初始化链接函数内部的作用域,则子作用域将无法通过作用域继承访问此处定义的任何作用域变量.这是因为父链接功能总是在子链接功能之后执行.因此,范围初始化的适当位置在控制器功能内部.

公开Controller API

子指令可以通过指令定义对象上的'require'属性访问父指令的控制器.这允许指令进行通信.为了使其工作,必须完全定义父控制器,以便可以从子指令的链接函数访问它.实现这一点的最佳位置是控制器功能本身的定义.父控制器功能始终在子控制器功能之前调用.

最后的想法

重要的是要理解链接功能和控制器功能有两个非常不同的目的.控制器功能是为初始化和指令通信而设计的,链接器功能是为运行时行为而设计的.根据代码的意图,您应该能够确定它是属于控制器,还是属于链接器.

您是否应该将任何初始化范围的代码从链接功能移动到控制器功能?

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

您是否应该将$ watch处理程序从链接功能移动到控制器功能?

否.链接功能的目的是连接行为并可能操纵DOM.在link函数中,所有指令都已编译,并且所有子链接函数都已执行.这使得它成为一个理想的连接行为的地方,因为它尽可能接近DOM准备就绪(直到渲染阶段之后才真正准备好DOM).

  • 那么:"最佳实践:当你想要将API暴露给其他指令时使用控制器.否则使用链接.".资料来源:https://docs.angularjs.org/guide/directive (2认同)