指令定义对象的"要求"是什么?

tam*_*are 36 angularjs angularjs-directive

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
  };
}]);
Run Code Online (Sandbox Code Playgroud)

pane指令具有require: '^tabs',其中tabs是其父元素上的指令的名称,而附加到该指令的控制器的名称是TabsController.根据我自己对上述定义的解释,它应该require: '^TabsController'不是require: '^tabs',而且显然是错误的.请告诉我在理解中我错过了什么.

Bla*_*ise 96

require参数,包括它的前缀,则记录了对$compileAPI的参考页.

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

  • (无前缀) - 在当前元素上找到所需的控制器.如果找不到则抛出错误.
  • ?- 尝试找到所需的控制器或如果未找到则传递nulllinkfn.
  • ^ - 通过搜索元素及其父元素来定位所需的控制器.如果找不到则抛出错误.
  • ^^ - 通过搜索元素的父项找到所需的控制器.如果找不到则抛出错误.
  • ?^- 尝试通过搜索元素及其父元素来定位所需的控制器,或者如果未找到则传递 nulllinkfn.
  • ?^^- 尝试通过搜索元素的父项找到所需的控制器,或者如果未找到则传递 nulllinkfn.

  • @ URL87在当前的实现中,顺序无关紧要. (6认同)
  • @BenWilde:`?^`和`^?`一样吗?这些前缀是否有顺序重要性? (5认同)
  • 另外(根据文档),您可以通过传递数组来要求多个,并且它们也将作为数组进入链接函数(第4个参数). (4认同)

bml*_*ite 14

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

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

在选项卡示例之后,当tabs创建一个元素时,TabsController还会创建一个新的实例并将其附加到该特定元素数据,如:

tabElement.data('$tabsController', tabsControllerInstance)
Run Code Online (Sandbox Code Playgroud)

require: '^tabs'所述上pane元件基本上是针对该特定控制器实例(请求tabsControllerInstance)母体上使用tabs元件.