一尘不染

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

angularjs

require-
要求将另一个控制器传递给当前的指令链接功能。require会传入指令控制器的名称。如果找不到此类控制器,则会引发错误。该名称可以带有以下前缀:

  • ?-不要提出错误。这使得require依赖关系是可选的。
  • ^-还要在父元素上查找控制器。

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

angularjs-ui引导项目中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',这显然是错误的。请告诉我我的理解力中缺少什么。


阅读 283

收藏
2020-07-04

共1个答案

一尘不染

文档中的这个特定主题确实令人困惑,但是似乎很奇怪,这一切都是有道理的。

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

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

tabElement.data('$tabsController', tabsControllerInstance)

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

2020-07-04