与第三个命令共享两个AngularJS指令

Question

编辑这里是我的扑通

下面是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‘指令。

端编辑

我正在查看本站的AngularJs开发人员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”指令。我尝试将myPane指令中的要求更改为一系列指令，如：

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);
}

看，还有，这个短演示。

Answer 2

因为在myPane指令中的'require‘属性中有一个控制器数组，那么tabsCtrl将是一个控制器数组。您可以访问它，就像访问普通数组一样：

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