37

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'明らかに間違っています。私の理解に欠けているものを教えてください。

4

2 に答える 2

15

ドキュメントのこの特定のトピックは確かに紛らわしいですが、奇妙なように見えますが、すべて理にかなっています。

この定義の背後にあるロジックを理解するための鍵は、「ディレクティブ コントローラー」がコントローラー ファクトリではなく、ディレクティブのコントローラー インスタンスを指すことを理解することです。

タブの例に従って、tabs要素が作成されると、 の新しいインスタンスTabsControllerも作成され、その特定の要素データにアタッチされます。たとえば、次のようになります。

tabElement.data('$tabsController', tabsControllerInstance)

要素のは基本的require: '^tabs'に、親要素で使用されpaneている特定のコントローラー インスタンス ( ) に対する要求です。tabsControllerInstancetabs

于 2013-02-17T00:39:15.643 に答える