如何prevent重定向＆LT; A HREF =＆QUOT;＃东西和QUOT;＆GT;在角Js1.2 [英] How to prevent redirecting <a href="#something"> in Angular Js1.2

问题描述

我是用AngularJs-1.7.0，并引导我的应用程序。近日笔者从AngularJs-1.0.7迁移到AngularJs-1.2。我使用的引导的手风琴和标签。

I was using AngularJs-1.7.0 and Bootstrap in my application. Recently I migrated from AngularJs-1.0.7 to AngularJs-1.2. I am using Bootstrap's Accordions and Tabs.

HTML code为选项卡包含＆LT; A HREF =＃id_for_content方式＆gt; ，如下图所示。

Html code for Tab contains <a href="#id_for_content"> as shown below.

<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>

在角的旧版本，路线发生了变化，只有当我们给像＆LT锚标记; A HREF =＃/ firstTab＆GT; 。但AngularJs-1.2重定向＆LT; A HREF =＃firstTab＆GT; 。它不考虑 / 之间＃和 firstTab 。因此，尽管标签上点击它重定向到的http：//的web_url /＃/ firstTab 。如何解决这个问题？

In Angular's old versions, route change happens only if we give anchor tag like <a href="#/firstTab">. But AngularJs-1.2 redirects <a href="#firstTab">. It doesn't consider the / in between # and firstTab. Hence while clicking on Tab it redirects to http://web_url/#/firstTab . How to solve this issue?

我找到了这个问题的解决方案。我写了一个指令的标签。在该指令我查href属性。如果匹配，从它的默认行为prevent。检查下面的code。

I found a solution for this issue. I wrote a directive for a tag. In that directive I checked for href attribute. If it matches prevent from its default behavior. Check the following code.

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或手风琴IDS在这里。如果我使用动态ID对他们来说，它不是可以检查指令。

But the problem with this method is, I have to check each and every tab ids or accordion ids here. If I use dynamic Ids for them, its not possible to check in directive.

如果你能找到更好的解决方案，让我们大家都知道这一点。

If you can find better solution, let us all know about it.

推荐答案

我只想让你知道，还有另一种解决方案来解决这个问题（无控制器定义功能）。

I would just like to let you know that there is another solution to solve this issue (without defining function in controllers).

您可以创建一个指令，将prevent默认浏览器的行为（这实际上是不断变化的网址）：

You can create a directive that will prevent default browser's behaviour (which is actually changing URL):

var PreventDefault = function () {

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

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

然后只需添加指令到每个负责切换标签这样的元素：

<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>

这篇关于如何prevent重定向＆LT; A HREF =＆QUOT;＃东西和QUOT;＆GT;在角Js1.2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！