我在应用程序中使用AngularJs-1.0.7和Bootstrap。最近我从AngularJs-1.0.7迁移到AngularJs-1.2。我使用的是Bootstrap的Accordions和Tabs。
Tab的HTML代码包含< a href =“#id_for_content”>如下所示。
<ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#firstTab" data-toggle="tab">Home</a></li> <li><a href="#secondTab" data-toggle="tab">Profile</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="firstTab"> <p>Content for first tab.</p> </div> <div class="tab-pane fade" id="secondTab"> <p>Content For second tab.</p> </div> </div>
在Angular的旧版本中,只有当我们给出< a href =“#/ firstTab”>的锚标签时,路由更改才会发生。但AngularJs-1.2重定向< a href =“#firstTab”> ;.它不考虑在#和firstTab之间的/。因此,当点击Tab时,它将重定向到http:// web_url /#/ firstTab。如何解决这个问题? 我的解决方案 我找到了一个解决这个问题的解决方案。我写了一个标签的指令。在该指令中,我检查了href属性。如果它匹配防止其默认行为。检查以下代码。
app.directive('a',function() { return { restrict: 'E',link: function(scope,elem,attrs) { if(attrs.href === '#firstTab'|| attrs.href === '#secondTab'){ elem.on('click',function(e){ e.preventDefault(); }); } } }; });
但是这种方法的问题是,我必须在这里检查每个标签ID或手风琴ID。如果我使用动态Ids,它不可能检入指令。
如果你能找到更好的解决方案,让我们都知道。