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)
假设您的指令定义子范围(或继承范围).如果初始化链接函数内部的作用域,则子作用域将无法通过作用域继承访问此处定义的任何作用域变量.这是因为父链接功能总是在子链接功能之后执行.因此,范围初始化的适当位置在控制器功能内部.
子指令可以通过指令定义对象上的'require'属性访问父指令的控制器.这允许指令进行通信.为了使其工作,必须完全定义父控制器,以便可以从子指令的链接函数访问它.实现这一点的最佳位置是控制器功能本身的定义.父控制器功能始终在子控制器功能之前调用.
重要的是要理解链接功能和控制器功能有两个非常不同的目的.控制器功能是为初始化和指令通信而设计的,链接器功能是为运行时行为而设计的.根据代码的意图,您应该能够确定它是属于控制器,还是属于链接器.
您是否应该将任何初始化范围的代码从链接功能移动到控制器功能?
是的,这是控制器功能存在的主要原因之一:初始化范围,并允许其范围参与原型范围继承.
您是否应该将$ watch处理程序从链接功能移动到控制器功能?
否.链接功能的目的是连接行为并可能操纵DOM.在link函数中,所有指令都已编译,并且所有子链接函数都已执行.这使得它成为一个理想的连接行为的地方,因为它尽可能接近DOM准备就绪(直到渲染阶段之后才真正准备好DOM).
归档时间: |
|
查看次数: |
6706 次 |
最近记录: |