Question

编辑这是我的plunk

以下是myPane指令中导致它破坏的两行。

require: '^myMainTabs',  //Comment out this line and uncomment below to break.
//require: ['^myMainTabs', '^mySubTabs'],  //Comment out this line and uncomment above to fix.

我希望能够使用相同的myPane＆＃39;这两个标签的指令，如果可能的话。

结束编辑

我在this site看着AngularJs Developer Guid。在底部，我发现了一些我想用于标签底座的东西。

以下是该页面上的代码。

.directive('myTabs', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: function($scope) {
      var panes = $scope.panes = [];

      $scope.select = function(pane) {
        angular.forEach(panes, function(pane) {
          pane.selected = false;
        });
        pane.selected = true;
      };

      this.addPane = function(pane) {
        if (panes.length === 0) {
          $scope.select(pane);
        }
        panes.push(pane);
      };
    },
    templateUrl: 'my-tabs.html'
  };
})
.directive('myPane', function() {
  return {
    require: '^myTabs',
    restrict: 'E',
    transclude: true,
    scope: {
      title: '@'
    },
    link: function(scope, element, attrs, tabsCtrl) {
      tabsCtrl.addPane(scope);
    },
    templateUrl: 'my-pane.html'
  };
});

我所做的是将我公司的主题应用于此，现在它看起来像标签并且效果很好！

但是，我们有两种或三种不同的标签类型，但最后，它们都可以使用相同的“myPane”＃39;指示。我尝试将myPane指令中的require更改为指令数组，例如：

require: ['^tabType1', '^tabType2']

但似乎需要两种类型的指令。

有没有办法让指令被其他指令共享？

这样的事情：

.directive('myMainTabs', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: function($scope) {
      var panes = $scope.panes = [];

      $scope.select = function(pane) {
        angular.forEach(panes, function(pane) {
          pane.selected = false;
        });
        pane.selected = true;
      };

      this.addPane = function(pane) {
        if (panes.length === 0) {
          $scope.select(pane);
        }
        panes.push(pane);
      };
    },
    templateUrl: 'my-main-tabs.html'
  };
})
.directive('mySubTabs', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: function($scope) {
      var panes = $scope.panes = [];

      $scope.select = function(pane) {
        angular.forEach(panes, function(pane) {
          pane.selected = false;
        });
        pane.selected = true;
      };

      this.addPane = function(pane) {
        if (panes.length === 0) {
          $scope.select(pane);
        }
        panes.push(pane);
      };
    },
    templateUrl: 'my-sub-tabs.html'
  };
})
.directive('myPane', function() {
  return {
    require: ['^myMainTabs','^mySubTabs'] //Doesn't work
    restrict: 'E',
    transclude: true,
    scope: {
      title: '@'
    },
    link: function(scope, element, attrs, tabsCtrl) {
      tabsCtrl.addPane(scope);
    },
    templateUrl: 'my-pane.html'
  };
});

谢谢，杜安

Answer 1

由于一次只能使用两个父指令（以及控制器）中的一个，因此可以将它们设为可选（使用?）并检查哪一个存在：

require: ['^?myMainTabs', '^?mySubTabs'],
...
link: function (scope, elem, attrs, ctrls) {
    var tabsCtrl = ctrls[0] || ctrls[1] || null;
    if (!tabsCtrl) return;

    tabsCtrl.addPane(scope);
}

另请参阅此 short demo 。

Answer 2

由于您的“要求”中有一系列控制器。 myPane指令中的属性，然后tabsCtrl将是一个控制器数组。您可以像访问普通数组一样访问它：

tabsCtrl[0] --> first controller (myMainTabs)
tabsCtrl[1] --> second controller (mySubTabs)

与第三个共享两个AngularJS指令

2 个答案: