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

前端之家收集整理的这篇文章主要介绍了AngularJS:我应该将指令的链接功能转换为控制器吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我听说在使用隔离范围的指令中使用controllerAs语法以及bindToController:true是一个很好的做法。参考文献: onetwo

假设我有一个这样的指示:

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:true,我必须有一个控制器。

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

angular.module('MyModule').directive('MyDirective',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,用于指令性的指令通信。

任何人都可以了解这些天的最佳做法,注意了Angular 2.0?

我认为最好的做法是移动初始化代码和/或在指令的控制器内部暴露API函数,因为它有两个目的:
1. Intialization of $scope 
2. Exposing an API for communication between directives

范围初始化

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

露出Controller API

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

最后的想法

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

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

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

你应该将$ watch处理程序从链接函数移到控制器函数吗?

否。链接功能的目的是连接行为并可能操纵DOM。在链接功能中,所有指令都已经被编译,所有的子链接功能都已经执行了。这使它成为连接行为的理想场所,因为它可以像DOM那样接近DOM(在渲染阶段之后不是真正的DOM准备就绪)。

猜你在找的Angularjs相关文章