如何防止重定向 <a href="#something">在 Angular Js1.2 中 [英] How to prevent redirecting <a href="#something"> in Angular Js1.2

问题描述

我在我的应用程序中使用了 AngularJs-1.0.7 和 Bootstrap.最近我从 AngularJs-1.0.7 迁移到 AngularJs-1.2.我正在使用 Bootstrap 的 Accordions 和 Tabs.

标签的 Html 代码包含 如下所示.

<li class="active"><a href="#firstTab" data-toggle="tab">首页</a></li><li><a href="#secondTab" data-toggle="tab">个人资料</a></li>
<div id="myTabContent" class="tab-content"><div class="tab-pane淡入活跃" id="firstTab"><p>第一个标签的内容.</p>

<div class="tab-pane淡入淡出" id="secondTab"><p>第二个标签的内容.</p>

在 Angular 的旧版本中，只有当我们提供像 <a href="#/firstTab"> 这样的锚标记时，才会发生路由更改.但是 AngularJs-1.2 会重定向 .它不考虑 # 和 firstTab 之间的 /.因此，当点击 Tab 时，它会重定向到 http://web_url/#/firstTab .如何解决这个问题?

---

我的解决方案

我找到了解决此问题的方法.我为标签编写了一个指令.在该指令中，我检查了 href 属性.如果匹配，则阻止其默认行为.检查以下代码.

app.directive('a', function() {返回 {限制:'E'，链接:功能(范围，元素，属性){if(attrs.href === '#firstTab'|| attrs.href === '#secondTab'){elem.on('点击', function(e){e.preventDefault();});}}};});

但是这种方法的问题是，我必须在这里检查每个标签 ID 或手风琴 ID.如果我为它们使用动态 ID，则无法签入指令.

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

解决方案

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

target="_self"

你准备好了;)

I was using AngularJs-1.0.7 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 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>

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?

---

My Solution

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();
                });
            }
        }
   };
}); 

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.

解决方案

Just add this to your links:

target="_self"

And you're ready ;)

这篇关于如何防止重定向 <a href="#something">在 Angular Js1.2 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！