angularjs - 如何防止在 Angular Js1.2 中重定向 <a href ="#something">

Question

我在我的应用程序中使用 AngularJs-1.0.7 和 Bootstrap。最近我从 AngularJs-1.0.7 迁移到 AngularJs-1.2。我正在使用 Bootstrap 的 Accordion 和选项卡。

选项卡的 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"> 这样的 anchor 标记时，才会发生路由更改。 。但 AngularJs-1.2 重定向 <a href="#firstTab"> 。它不考虑 /之间#和firstTab 。因此，当单击选项卡时，它会重定向到 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 或 Accordion ID。如果我为它们使用动态 ID，则无法 checkin 指令。

如果您能找到更好的解决方案，请告诉我们。

Answer 1

只需将其添加到您的链接中即可:

target="_self"

你已经准备好了;)