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

Question

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

这个插件是未包装的 tabset 指令:

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

这个插件包含我第一次尝试包装 tabset 指令:

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

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

关键代码片段:

.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...但这就是我需要帮助的地方。有谁知道一种干净的方法来做到这一点，而不会遇到“要求隔离范围的多个指令”和“要求嵌入的多个指令” Angular 错误。这是一次失败的尝试。

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 属性来自动填充 tab 指令中的字段(由 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>'
  };
});

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

我可以接受要求包装指令没有隔离范围的解决方案。我可以通过在 Controller 上下文中存储状态来解决这个问题。

Answer 1

如果您正在尝试增强 angular-ui 的功能，那么最好使用属性指令而不是全新的元素来实现。我可能是错的，但看起来你并不打算改变 DOM 的一般结构，只是用 angular-ui 的指令替换你的指令。例如，使用 HTML

<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 相同的隔离范围，而不是使用它(尽管您无法在此处定义绑定(bind))您可以像使用正常绑定(bind)值一样获取属性 $parse和属性。

您的指令(具有第二个插件的功能)最终看起来像这样。

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