我创建了这个jsfiddle:
http://jsfiddle.net/noahgoodrich/CDwfL/1/
我创建了一组指令来管理和操作导航标签。出于某种原因,当我尝试关闭选项卡时,它最初会删除相应的数组元素,但随后元素将替换为空元素。打开标签似乎按预期工作。
app.directive('navTabOpen', ['$parse', 'navTabsService', function($parse, navTabsService) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.tabs = navTabsService.tabs;
element.bind('click', function() {
var tab = null;
var b = scope.$eval(attrs.navTabOpen);
for(var i=0;i<scope.tabs.length;i++) {
scope.tabs[i].active = null;
if(scope.tabs[i].tabId == b.id) {
tab = i;
}
}
if(tab == null) {
tab = {tabId: b.id, name: b.name, stage: b.status, active: 'active'};
scope.tabs.push(tab)
} else {
scope.tabs[tab].active = 'active';
}
});
}
}
}])
.directive('navTabClose', ['$location', 'navTabsService', function($location, navTabsService) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.tabs = navTabsService.tabs;
element.bind('click', function() {
var tab = null;
for(var i=0;i<scope.tabs.length;i++) {
if(scope.tabs[i].tabId == attrs.tabId) {
tab = i;
}
}
if(tab != null) {
if(scope.tabs[tab].active == 'active') {
if(scope.tabs.length == 1) {
$location.path('/');
} else if(tab == 0) {
scope.tabs[1].active = 'active';
} else {
scope.tabs[tab-1].active = 'active';
}
}
scope.tabs.splice(tab,1);
console.log(scope.tabs)
}
});
}
}
}])
任何人都可以提供有关我如何错误地使用navTabsService
的信息吗?或link()
和navTabOpen
指令中的navTabClose
函数是什么?
答案 0 :(得分:1)
在您的navTab
指令中(在链接小提琴中可见),指令模板定义嵌套在span
标记中的a
元素。 Span元素使用navTabClose
指令,而父a
标记元素使用navTabOpen
指令。两个指令中的链接函数定义了一个单击处理程序。单击x
时会执行这两个处理程序,这会产生意外行为。
app.directive('navTab', function () {
return {
restrict: 'A',
template: '<li class="{{tab.active}} stage-{{tab.stage}}">'
+'<a href="/borrower/{{tab.tabId}}" nav-tab-open="{id: {{tab.tabId}}}" >{{tab.name}}'
+'<span class="close" nav-tab-close tab-id="{{tab.tabId}}">×</span>'
+'</a>'
+'</li>',
replace: true,
scope: { tab: '=' }
};
})