包装angular-ui tabset指令并遇到"Multiple directives for transclusion/ isolated scope“错误

Question

我正在尝试扩展angular-ui选项卡集功能，但我遇到了包装它的问题。

这个插入器是tabset指令un：

http://plnkr.co/edit/AhG3WVNxCal5fZOUbSu6?p=preview

这个柱塞包含了我在包装tabset指令时的第一次尝试：

http://plnkr.co/edit/naKXbeVOS8nizwDPUrkT?p=preview

最初的包装方法是直接包装。但是..。我在替换模板中引入了额外的div，以避免“多个指令要求隔离作用域”和“多个指令要求换位”的角度错误，并确保换位发生。

关键代码片段：

.directive('urlTabset', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {
      tabManager: '='
    },
    controller: [ "$scope", function($scope) {
      var tabManager = $scope.tabManager;
    }],
    template:
      '<div>' +
        '<tabset>' +
          '<div ng-transclude>' +
          '</div>' +
        '</tabset>' +
      '</div>'
  };
})

.directive('urlTab', function() {
  return {
    require: '^urlTabset',
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: { tabName: '@' },
    link: function(scope, element, attrs, urlTabsetCtrl) {
    },
    template:
      '<div>' +
        '<tab>' +
          '<div ng-transclude>' +
          '</div>' +                  
        '</tab>' +
      '</div>'
  };
});

然而，我认为模板中额外的div会导致问题。这是一个未包装的选项卡集，在我的模板要添加它们的地方有额外的div。

http://plnkr.co/edit/kjDs7xJcZqltCAqUSAmX?p=preview

所以合乎逻辑的事情是消除div..。但这是我需要帮助的地方。有没有人知道一种干净的方法来做到这一点，而不会遇到“要求隔离范围的多个指令”和“要求转换的多个指令”的角度错误。这里有一个失败的尝试。

http://plnkr.co/edit/0C6lFNhfdTVcF7ahuN3G?p=preview

Error: Multiple directives [urlTab, tab] asking for transclusion on: <tab class="ng-isolate-scope ng-scope">

顺便说一句，如果您想知道我要做什么，我的最终目标是使用传递给urlTabset的tabManager属性自动填充选项卡指令(由urlTab包装)中的字段。更具体地说，这就是我的目标：

.directive('urlTab', function() {
  return {
    require: '^urlTabset',
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: { tabName: '@' },
    link: function(scope, element, attrs, urlTabsetCtrl) {
      scope.tabs = urlTabsetCtrl.tabs;
      scope.tabSelected = urlTabsetCtrl.tabSelected;
    },
    template:
      '<tab active="tabs[tabName].active" disabled="tabs[tabName].disabled" select="tabSelected(tabName)" ng-transclude>' +
      '</tab>'
  };
});

上面的模板显然不起作用，但它为您提供了我想要做的事情的要点。

我同意一个解决方案，它要求包装指令没有独立的作用域。我可以通过在控制器上下文中存储状态来解决这个问题。

Answer 1

如果您试图增强angular-ui的功能，最好使用属性指令而不是全新的元素。

<tabset url-tabset>
    <tab url-tab>
        <tab-heading>
            <i class="icon-list"></i> Details
        </tab-heading>
        Details content.
    </tab>
    <tab url-tab>
        <tab-heading>
            <i class="icon-thumbs-up"></i> Impact
        </tab-heading>
        Impact tab content.
    </tab>                    
</tabset>

将意味着您不再需要执行任何转换或模板替换。这样就可以完全避免这个问题。

这就留下了要用于增强的属性的孤立作用域问题。您可以使用scope: true来获取与tab和tabset相同的独立作用域(尽管您不能在此处定义绑定)，并且可以像使用$parse和attrs那样使用普通绑定值来获取属性。

您的指令(带有第二个柱塞器中的功能)最终看起来如下所示。

angular.module('plunker', ['ui.bootstrap'])

.directive('urlTabset', function() {
  return {
    restrict: 'A',
    require: 'tabset', // Confirm the directive is only being used on tabsets
    controller: [ "$scope", "$attrs", function($scope, $attrs) {
      var tabManagerGetter = $parse($attrs.tabManager); // '='
      this.getTabManager = function() {
        return tabManagerGetter($scope);
      };

      // fun stuff here
    }]
  };
})

.directive('urlTab', function() {
  return {
    require: ['tab', '^urlTabset'],
    restrict: 'A',
    link: function(scope, element, attrs, ctrls) {
      var urlTabsetCtrl = ctrls[1];

      function getTabName() {
        return attrs.tabName; // '@'
      }

      var tabManager = urlTabsetCtrl.getTabManager();

      // fun stuff here
    }
  };
});