我在应用程序中使用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,它不可能检入指令。
如果你能找到更好的解决方案,让我们都知道。