这个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',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">
BTW,如果你想知道我想要做什么,我的最终目标是使用传递给urlTabset的tabManager属性来自动填充tab指令中的字段(由urlTab包装).更具体地说,这正是我的目标：
.directive('urlTab',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>'
};
});
上面的模板显然不行,但它给了我想要做的一切.
<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来获取与选项卡和选项卡集相同的隔离作用域(尽管您无法在此定义绑定),并且可以通过使用$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',ctrls) {
var urlTabsetCtrl = ctrls[1];
function getTabName() {
return attrs.tabName; // '@'
}
var tabManager = urlTabsetCtrl.getTabManager();
// fun stuff here
}
};
});
