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确定值。

你的指令（使用你的第二个掠夺者的功能）最终看起来像这样。

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

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

1 个答案: