包装angular-ui tabset指令并遇到"多个指令要求转换/隔离范围"错误

Question

我正在尝试扩展angular-ui tabset功能,我遇到了包装它的问题.

这个plunker是未包装的tabset指令:

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

这个plunker包含我第一次尝试包装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会导致问题.这是展开的tabset,在我的模板添加它们的地方有额外的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属性来自动填充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>'
  };
});

上面的模板显然不起作用,但它为您提供了我正在尝试做的事情的要点.

我可以使用一个解决方案,它要求包装指令不具有隔离范围.我可以通过在控制器上下文中存储状态来解决这个问题.

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(虽然您无法在此处定义绑定)并且您可以通过使用$parse和使用正常绑定值来获取属性attrs.

你的指令(使用你的第二个plunker的功能)然后最终看起来像这样.

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