angularjs – 包含angular-ui tabset指令并遇到“多指令要求截断
|
我正在尝试扩展角度ui选项卡功能,我遇到了包装问题.
这个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>'
};
});
上面的模板显然不行,但它给了我想要做的一切. 而且我可以使用一个解决方案,它需要包装指令没有一个孤立的范围.我可以通过将状态存储在控制器上下文来解决.
如果您正在尝试增加角色的功能,您可能会更好地使用属性指令而不是全新的元素.我可能会误会,但是看起来你不想改变DOM的一般结构,而不是用角度替换你的指令.例如,使用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来获取与选项卡和选项卡集相同的隔离作用域(尽管您无法在此定义绑定),并且可以通过使用 您的指令(具有您的第二个空格的功能)然后最终看起来像这样. 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
}
};
});
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |