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

Question

我在我的应用程序中使用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.如果我为它们使用动态ID,则无法检入指令.

如果您能找到更好的解决方案,请让我们都知道.

Answer 1

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

target="_self"

而你准备好了;)

Answer 2

试试data-target="#something",它在开发和生产环境中都适合我.

Answer 3

我想告诉您,还有另一种解决方案可以解决此问题(无需在控制器中定义功能).

您可以创建一个指令来阻止默认浏览器的行为(实际上是在更改URL):

var PreventDefault = function () {

    var linkFn = function (scope, element, attrs) {
        $(element).on("click", function (event){
            event.preventDefault();
        });
    };

    return {
        restrict: 'A',
        link: linkFn
    }
};

然后只需将指令添加到a负责切换选项卡的每个元素,如下所示:

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#firstTab" prevent-default data-toggle="tab">Home</a></li>
    <li><a href="#secondTab" prevent-default 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>

Answer 4

通常,您可以使用rootscope在所有范围的原型上定义函数.添加ng-click你的锚标签并将$ event传递给rootscope处理程序.Angular也可以通过ng-click发送原始事件:

<a ng-click="tabclick($event)">

在模块的运行块中,您可以在$ rootScope上设置tabClick函数

$rootScope.tabclick = function ($event) { $event.preventDefault(); }

这适用于任何范围,您不必检查特定元素ID.

示例小提琴:http://jsfiddle.net/stto3703/wQe6P/

干杯

Answer 5

您可以使用 ng-click 调用 JS 中的函数。在该函数中，使用事件的preventDefault方法，并使用$location的hash方法来更改 URL 中的哈希值。