问题描述
require - 要求将另一个控制器传递到当前指令中联动功能.require 采用指令控制器的名称传入.如果找不到这样的控制器,则会引发错误.名称可以带有前缀:
- ?- 不要提出错误.这使得 require 依赖项成为可选.
- ^ - 也在父元素上查找控制器.
以上是官方文档中的定义.这里的歧义就是指令控制器"究竟是什么.
Above is the definition from the official docs. The ambiguity here is what exactly is a "directive controller".
从 angularjs-ui 引导程序中获取 tabs 指令以项目为例.
Take the tabs directive from the angularjs-ui bootstrap project, as an example.
angular.module('ui.bootstrap.tabs', [])
.controller('TabsController', ['$scope', '$element', function($scope, $element) {
... // omitted for simplicity
}])
.directive('tabs', function() {
return {
restrict: 'EA',
transclude: true,
scope: {},
controller: 'TabsController',
templateUrl: 'template/tabs/tabs.html',
replace: true
};
})
.directive('pane', ['$parse', function($parse) {
return {
require: '^tabs',
restrict: 'EA',
transclude: true,
scope:{
heading:'@'
},
link: function(scope, element, attrs, tabsCtrl) {
... // omitted for simplicity
},
templateUrl: 'template/tabs/pane.html',
replace: true
};
}]);
pane
指令具有 require: '^tabs'
,其中 tabs
是其父元素上的指令名称,而附加到该指令的控制器的名称是 TabsController
.从我自己对上述定义的解释来看,它应该是 require: '^TabsController'
而不是 require: '^tabs'
,这显然是错误的.请告诉我我的理解中缺少什么.
The pane
directive has require: '^tabs'
, in which tabs
is the name of a directive on its parent element, while the name of the controller attached to that directive is TabsController
. From my own interpretation of the above definition, it should have been require: '^TabsController'
not require: '^tabs'
and that's obviously wrong. Please tell me what am I missing in my comprehension.
推荐答案
文档中的这个特定主题确实令人困惑,但尽管看起来很奇怪,但一切似乎都说得通.
This particular topic of the documentation is indeed confusing, however as strange as it seems to be it all makes sense.
理解这个定义背后的逻辑的关键是理解指令控制器"是指指令的控制器实例,而不是控制器工厂.
The key to understand the logic behind this definition is to understand that "directive controller" refers to a directive's controller instance and not a controller factory.
按照选项卡示例,当创建 tabs
元素时,也会创建 TabsController
的新实例并将其附加到该特定元素数据,例如:
Following the tabs example, when a tabs
element is created, a new instance of the TabsController
is also created and attached to that specific element data, something like:
tabElement.data('$tabsController', tabsControllerInstance)
pane
元素上的 require: '^tabs'
基本上是对正在使用的特定控制器实例 (tabsControllerInstance
) 的请求父 tabs
元素.
The require: '^tabs'
on the pane
element is basically a request for that specific controller instance (tabsControllerInstance
) being used on the parent tabs
element.
这篇关于什么是“需要"?指令定义对象取什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!