单击AngularJS中的链接时阻止页面刷新

时间:2015-11-16 10:55:17

标签: javascript angularjs

点击链接后,我在AngularJS中发现了一个奇怪的行为。我的目标是在路径相同时阻止页面刷新,只有查询字符串更改。

奇怪的是,这种情况已经发生......但有时只会发生。至少在我的特定情况下,一些链接会触发页面刷新,而其他一些链接则不会,即使它们看起来相同(除了那些具有title属性而不是其他更改的更改)。

<a class="btn btn-primary" ng-href="https://.../search?_target=event&...>Edit</a>

除了这个奇怪的事情,也许是我做错事的结果,我想问一下在链接点击时避免页面刷新的常用方法,如果可能的话,有人手动更改URL,但只有查询串。例如,因为你想要激活一些特定的弹出窗口而必须等待整个应用程序加载是很烦人的。

请注意,我启用了HTML5模式。

感谢。

1 个答案:

答案 0 :(得分:1)

您似乎在<a>代码中使用绝对链接。

您应该使用路由器的链接(如果您使用ui-router ui-sref来导航状态)。

[编辑] 这个问题似乎有很大的不同,所以这是另一个措辞:

&#34;我需要在我的所有状态下显示基于我的状态参数的弹出窗口,只要状态发生变化&#34;。

所以这是如何做到的:

逻辑说,由于您必须在所有状态更改中显示此内容,因此您应该挂钩$stateChangeSuccess函数(docs)。

这样,您可以在那里实现逻辑并显示弹出窗口和所有内容。我建议您将其放入app.js文件中,或者某个events.js文件中的应用程序相对较大或您喜欢的任何内容

angular.module('your_app_name').run(function($rootScope){
    $rootScope.$on('$stateChangeSuccess', 
        function(event, toState, toParams, fromState, fromParams){
            // you have your toParams, your toState and everything here, so use your logic to open your popup window.
    })
});