37

require - 要求将另一个控制器传递到当前指令链接函数中。require 需要传入指令控制器的名称。如果找不到这样的控制器，则会引发错误。该名称可以带有前缀：

  • ? - 不要引发错误。这使得 require 依赖项是可选的。
  • ^ - 也在父元素上寻找控制器。

以上是官方文档中的定义。这里的歧义是什么是“指令控制器”。

以angularjs-ui bootstrap 项目中的 tabs 指令为例。

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'，这显然是错误的。请告诉我我的理解中缺少什么。

4

2 回答 2

99

API 参考页面上记录了该require参数（包括其前缀）。$compile

需要另一个指令并将其控制器作为第四个参数注入链接函数。require 需要传入指令的字符串名称（或字符串数​​组）。如果使用数组，则注入的参数将是相应顺序的数组。如果找不到这样的指令，或者该指令没有控制器，则会引发错误。该名称可以带有前缀：

  • （无前缀） - 在当前元素上找到所需的控制器。如果找不到则抛出错误。
  • ?- 尝试定位所需的控制器，如果找不到，则传递null给linkfn。
  • ^- 通过搜索元素及其父元素找到所需的控制器。如果找不到则抛出错误。
  • ^^- 通过搜索元素的父元素找到所需的控制器。如果找不到则抛出错误。
  • ?^- 尝试通过搜索元素及其父元素来定位所需的控制器，如果未找到则传递 null给linkfn。
  • ?^^- 尝试通过搜索元素的父元素来定位所需的控制器， 如果找不到则传递null给fn。link
于 2013-11-27T09:13:50.810 回答
15

文档的这个特定主题确实令人困惑，但是看起来很奇怪，这一切都是有道理的。

理解这个定义背后的逻辑的关键是要理解“指令控制器”是指指令的控制器实例，而不是控制器工厂。

按照选项卡示例，tabs创建元素时，还会创建一个新实例TabsController并将其附加到该特定元素数据，例如：

tabElement.data('$tabsController', tabsControllerInstance)

require: '^tabs'元素上的基本上是对父元素上使用的pane特定控制器实例 ( ) 的请求。tabsControllerInstancetabs

于 2013-02-17T00:39:15.643 回答