Angularjs路由在使用ui引导程序中的tabset指令时表现得很奇怪

Angularjs Routing behaves strange when using tabset directive from ui-bootstrap

本文关键字:指令 tabset 路由 ui 引导程序 Angularjs      更新时间:2023-09-26

我一直在试图解决一个奇怪的行为。每当我在我的一个ui路由器模板中使用ui引导程序中的tabset指令时,我都无法导航离开那个特定的状态。我得到的错误是:

Error: parent is null Scope.prototype.$destroy@http://localhost:3000/js/lib/angular/angular.js:7801 bind/<@http://localhost:3000/js/lib/angular/angular.js:681 jQuery.event.dispatch@http://localhost:3000/js/lib/jquery/jquery-1.9.1.js:3074 jQuery.event.add/elemData.handle@http://localhost:3000/js/lib/jquery/jquery-1.9.1.js:2750 jQuery.event.trigger@http://localhost:3000/js/lib/jquery/jquery-1.9.1.js:2986 .triggerHandler@http://localhost:3000/js/lib/jquery/jquery-1.9.1.js:3683 removePatch@http://localhost:3000/js/lib/angular/angular.js:1497 update@http://localhost:3000/js/lib/angular/angular.js:13876 Scope.prototype.$broadcast@http://localhost:3000/js/lib/angular/angular.js:8090 updateRoute/<@http://localhost:3000/js/lib/angular/angular.js:7250 qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:3000/js/lib/angular/angular.js:6650 qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:3000/js/lib/angular/angular.js:6650 qFactory/ref/<.then/<@http://localhost:3000/js/lib/angular/angular.js:6687 Scope.prototype.$eval@http://localhost:3000/js/lib/angular/angular.js:7840 Scope.prototype.$digest@http://localhost:3000/js/lib/angular/angular.js:7707 Scope.prototype.$apply@http://localhost:3000/js/lib/angular/angular.js:7926 @http://localhost:3000/js/lib/angular/angular.js:5425 jQuery.event.dispatch@http://localhost:3000/js/lib/jquery/jquery-1.9.1.js:3074 jQuery.event.add/elemData.handle@http://localhost:3000/js/lib/jquery/jquery-1.9.1.js:2750

第一次它工作良好路由行为正常,但一旦加载了带有标签集的页面,上述路由的异常行为就会启动

这是我的小提琴。。。。。。。。。。。

你可以在小提琴演示中找到两个链接

1->Tab不存在[一个没有Tab的简单页面]2->选项卡显示[带有ui引导选项卡的页面]

如果您首先选择选项卡不存在页面,它将正常工作,但一旦您访问选项卡存在页面,则无论何时单击选项卡不存在页,都不会发生路由[即选项卡不会消失]。

如果您先访问Tab Present Page,然后选择Tab Absent Page,您将在控制台中出错

我不再喜欢jsFiddle了——所以我把你的代码放在一个plunker中,并更新了angular和angular ui bootstrap的版本,瞧。。。(有效):

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