angularjs - 如何防止Angular Js1.2 中的重定向

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

一般来说，您可以使用根作用域在所有作用域的原型上定义函数。在锚标签上添加 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 中的哈希值。

Answer 6

我也遇到这个问题有一段时间了，我只是偶然发现了这个问题（以及你自己的答案）。事实证明，您的解决方案几乎是正确的，只需稍作修改即可使其按您的意愿工作。

除了您在使用选项卡时遇到的问题之外，我还遇到了下拉链接的问题——单击时它们正在离开当前页面，而不是下拉菜单——事实上，这个问题存在于任何旨在切换某些东西的链接，即设置了 data-toggle 属性。

因此，对您的代码稍作修改以检查是否存在“切换”属性可以为我解决它：

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.toggle){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

希望这可以帮助！

Answer 7

您在问题中的解决方案确实有效，但为了避免检查每个锚的 ID，请更改

if (attrs.href === '#firstTab'|| attrs.href === '#secondTab')

至

if (attrs.href && attrs.href.indexOf('#') > -1)

指示：

.directive('a', function () {
    return {
        restrict: 'E',
        link: function (scope, elem, attrs) {
            if (attrs.href && attrs.href.indexOf('#') > -1) {
                elem.on('click', function (e) {
                    e.preventDefault();
                });
            }
        }
    };
})  

Answer 8

如果您以前的答案没有成功，您可以尝试使用 $timeout... 在这种情况下，我使用了 AngularUI 选项卡...

vm.removeUserTab = function (user) {
    $timeout(function () {
        vm.activeTab = 0;
        var index = vm.userTabs.indexOf(user);
        vm.userTabs.splice(index, 1);
    });
};

Answer 9

归功于 https://prerender.io/js-seo/angularjs-seo-get-your-site-indexed-and-to-the-top-of-the-search-results/

我的解决方案： - 在 app.js 中尝试添加“$locationProvider.hashPrefix('!');”

    .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', '$locationProvider',
    function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
    $stateProvider
    .state('menu', {
        url: '/',
        cache: false,
        abstract: true,
        templateUrl: 'static/www/templates/menu.html'
    })
    .state('menu.main_page', {
    url: 'app/main',
    cache: false,
    views: {
        'menuContent': {
          templateUrl: 'static/www/templates/mainpage.html',
          controller: 'MainCtrl'
        }
    }
    })
    $locationProvider.hashPrefix('!');
    $urlRouterProvider.otherwise(function ($injector, $location) {
        var $state = $injector.get('$state');
        $state.go('menu.mainpage');
    });
   }])

• 在 index.html 中尝试添加

  <meta name="fragment" content="!">

正如马塞尔上面所说

.directive('a', function () {
return {
    restrict: 'E',
    link: function (scope, elem, attrs) {
        if (attrs.href && attrs.href.indexOf('#') > -1) {
            elem.on('click', function (e) {
                e.preventDefault();
            });
        }
    }
};
})

就这样！为我工作！