Question

require - 要求将另一个控制器传递给当前指令   连接功能。 require需要指令控制器的名称   传入。如果找不到这样的控制器，则会引发错误。名称可以加上前缀：


？ - 不要提出错误。这使得require依赖项可选。

^ - 在父元素上查找控制器。

以上是官方文档的定义。这里的模糊性恰恰是“指令控制器”。

以tabs directive from the angularjs-ui bootstrap project为例。

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是其父元素上的指令名称，而附加到该指令的控制器名称是{{1} }。根据我对上述定义的解释，它应该是TabsController而不是require: '^TabsController'，这显然是错误的。请告诉我在理解中我错过了什么。

Answer 1

require参数，包括其前缀is documented on the $compile API reference page。

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

（无前缀） - 在当前元素上找到所需的控制器。如果找不到则抛出错误。

? - 如果找不到，则尝试找到所需的控制器或将null传递给link fn。

^ - 通过搜索元素及其父元素找到所需的控制器。如果找不到则抛出错误。

^^ - 通过搜索元素的父项找到所需的控制器。如果找不到则抛出错误。

?^ - 尝试通过搜索元素及其父元素或传递来找到所需的控制器如果找不到null fn link。

?^^ - 尝试通过搜索元素的父项来查找所需的控制器，或者通过如果找不到null fn link。

Answer 2

文档的这个特定主题确实令人困惑，但是它似乎很奇怪，因为它似乎都是有道理的。

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

按照标签示例，当创建tabs元素时，还会创建TabsController的新实例并将其附加到该特定元素数据，如：

tabElement.data('$tabsController', tabsControllerInstance)

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

指令定义对象的“要求”是什么？

2 个答案: