Question

我使用routeProvider为我的网址定义控制器和模板。

当我点击与实际位置具有相同网址的链接时，没有任何反应。如果用户点击此类链接，即使位置未更改，我希望调用reload()方法。换句话说，如果我将位置设置为相同的值，我希望它的行为与我将其设置为不同的值相同。

有没有办法配置routeProvider或locationProvider来自动执行？或者这样做的正确方法是什么？这是往返应用程序中的标准行为，但如何在angularjs中执行此操作？

我也在google groups上问过它。

更新：

这个问题获得了很多观点，所以我将尝试解释我是如何解决我的问题的。

我在评论中建议Renan Tomal Fernandes建议在我的应用程序中链接自定义指令。

angular.module('core.directives').directive('diHref', ['$location', '$route',
        function($location, $route) {
    return function(scope, element, attrs) {
        scope.$watch('diHref', function() {
            if(attrs.diHref) {
                element.attr('href', attrs.diHref);
                element.bind('click', function(event) {
                    scope.$apply(function(){
                        if($location.path() == attrs.diHref) $route.reload();
                    });
                });
            }
        });
    }
}]);

然后该指令用于我想要具有此功能的应用程序中的所有链接。

<a di-href="/home/">Home</a>

此指令的作用是它根据href属性为您设置di-href属性，因此角度可以像往常一样处理它，当您将鼠标悬停在链接上时，您可以看到该网址。此外，当用户点击它并且链接的路径与当前路径相同时，它会重新加载路径。

Answer 1

在路线配置中为定义的网址添加/（斜杠）

我今天遇到了类似的问题，我的网页上有一个链接，当我点击它时，我希望每次都重新加载ng-view，以便我可以从服务器刷新数据。但是如果url位置没有改变，则angular不会重新加载ng-view。

最后，我找到了解决这个问题的方法。在我的网页中，我将链接href设置为：

<a href="#/test">test</a>

但是在路线配置中，我设置了：

$routeProvider.when('/test/', { controller: MyController, templateUrl:'/static/test.html' });

不同的是url中的最后一个斜杠。当我第一次点击href="#/test"时，angular将网址重定向到#/test/，然后加载ng-view。当我第二次点击它时，因为当前网址为#/test/，它不等于我点击的链接（href="#/test"）中的网址，因此Angular会触发位置更改方法并重新加载ng-view此外，Angular会再次将网址重定向到#/test/。下次我点击网址时，angular再次做同样的事情。这正是我想要的。

希望这对你有用。

Answer 2

您可以在链接上添加_target='_self'以强制重新加载页面。

e.g。

<a href="/Customer/Edit/{{customer.id}}" target="_self">{{customer.Name}}</a>

在IE和Firefox上测试版本1.0.5和1.2.15。

以下是来自AngularJS site的更多信息：

Html链接重写

当您使用HTML5历史记录API模式时，您将需要在不同浏览器中使用不同的链接，但您只需指定常规URL链接，例如：

<a href="/some?foo=bar">link</a>

当用户点击此链接时，

在旧版浏览器中，网址更改为/index.html#!/some?foo=bar
在现代浏览器中，网址更改为/some?foo=bar

如下所示，链接不会被重写;相反，浏览器将执行整页重新加载到原始链接。

包含目标元素的链接示例：<a href="/ext/link?a=b" target="_self">link</a>
转到其他域的绝对链接示例：<a href="http://angularjs.org/">link</a>
以'/'开头的链接，在定义base时会导致不同的基本路径示例：<a href="/not-my-base/link">link</a>

Answer 3

您应该使用$route.reload()强制重新加载。

我不知道是否有“自动”方式来执行此操作，但您可以使用ng-click这些链接

Answer 4

对于使用AngularUI Router的人。你可以使用这样的东西：

<a data-ui-sref="some.state" data-ui-sref-opts="{reload: true}">State</a>

注意重新加载选项。

在这里找到答案：https://stackoverflow.com/a/29384813/426840

Answer 5

来自@Renan Tomal Fernandes answer。以下是一个例子

HTML

<a href="#/something" my-refresh></a>

JS

angular.module("myModule",[]).
directive('myRefresh',function($location,$route){
    return function(scope, element, attrs) {
        element.bind('click',function(){
            if(element[0] && element[0].href && element[0].href === $location.absUrl()){
                $route.reload();
            }
        });
    }   
});

Answer 6

我认为这是一种更简单的方法。

.directive ('a', function ($route, $location) {
    var d = {};
    d.restrict = 'E';
    d.link = function (scope, elem, attrs) {

        // has target
        if ('target' in attrs) return;

        // doesn't have href
        if (!('href' in attrs)) return;

        // href is not the current path
        var href = elem [0].href;
        elem.bind ('click', function () {
            if (href !== $location.absUrl ()) return;
            $route.reload ();
        });
    };
    return d;
});

假设您想要点击所有基本的<a>链接（没有target属性）重新加载，并使用href属性中的相对链接（例如/home而不是http://example.com/home <html data-ember-extension="1" class="gr__irodemine_com"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=.8"> <title>Divinity Original Sin 2 Crafting</title> <style> .outputtable{ display:block; max-width: 100%; width: 800px; } select { background-color: rgba(255,255,255,.5); padding: 2px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } input { background-color: rgba(255,255,255,.5); padding: 2px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } table { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } </style> <link href="style.css" rel="stylesheet" type="text/css" </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" /> </head> <body> <div align="center"><img align="center" src="images/divinity-original-sin-2-logo.png" /></div> <div id="tabs17" class=""> <div class="ui red three item inverted menu"> <a class="active item" title="Divinity Original Sin 2 Home" class="current">Divinity Original Sin 2</a> <a class="item" href="divinity2.php" title="Crafting" class="current">Crafting</a> <a class="item" href="skills.php" title="Skills">Skills</a> </div> </div> <form id="form1" action="divinity2.php"> <table frame="border" cellpadding="5" align="center"> <tr> <td>Select a Category</td> <td> <select name="selection" id="selection"> <option value = "0" SELECTED>ALL</option> <option value = "1" >Weapons</option> <option value = "2" >Potions</option> <option value = "3" >Grenades</option> <option value = "4" >Arrows & Arrow Heads</option> <option value = "5" >Armor & Upgrades</option> <option value = "6" >Food & Drink</option> <option value = "7" >Misc</option> <option value = "8" >Runes & components</option> <option value = "9" >Scrolls & Books</option> </select> </td> </tr> <tr> <td>Search Text</td> <td><input type='text' id='searchMe' onClick="this.setSelectionRange(0, this.value.length)" onfocus="javascript:uncheckExact(this);" name='searchMe'value ="feather"></input><input type="checkbox" id="exactsearch" name="exactsearch" />exact search</td> </tr> <tr> <td colspan="2" align="center"><button type="submit">Search</button></td> </tr> </table> </form> <div class="ui container"> <table align='center' frame='border' class='divinitytable'><th>ITEM(S) CREATED</th><th>COMPONENTS</th><th>DESCRIPTION</th><tr><td><p><a href='divinity2.php?selection=ALL&searchMe=Teleportation Scroll&exactsearch=on' >Teleportation Scroll</a></p></td><td><p><a href='divinity2.php?selection=ALL&searchMe=Sheet of Paper&exactsearch=on' >Sheet of Paper</a></p><p><a href='divinity2.php?selection=ALL&searchMe=Air Essence&exactsearch=on' >Air Essence</a></p><p><a href='divinity2.php?selection=ALL&searchMe=Feather&exactsearch=on' >Feather</a></p></td><td>Teleportation description not yet entered.</td></tr><tr><td><p><a href='divinity2.php?selection=ALL&searchMe=Teleportation Scroll&exactsearch=on' >Teleportation Scroll</a></p></td><td><p><a href='divinity2.php?selection=ALL&searchMe=Sheet of Paper&exactsearch=on' >Sheet of Paper</a></p><p><a href='divinity2.php?selection=ALL&searchMe=| High Quality Air Essence |&exactsearch=on' >| High Quality Air Essence |</a></p><p><a href='divinity2.php?selection=ALL&searchMe=Feather&exactsearch=on' >Feather</a></p></td><td>Teleportation description not yet entered.</td></tr><tr><td><p><a href='divinity2.php?selection=ALL&searchMe=Teleportation Scroll&exactsearch=on' >Teleportation Scroll</a></p></td><td><p><a href='divinity2.php?selection=ALL&searchMe=Sheet of Paper&exactsearch=on' >Sheet of Paper</a></p><p><a href='divinity2.php?selection=ALL&searchMe=| Alien Air Essence |&exactsearch=on' >| Alien Air Essence |</a></p><p><a href='divinity2.php?selection=ALL&searchMe=Feather&exactsearch=on' >Feather</a></p></td><td>Teleportation description not yet entered.</td></tr><tr><td><p><a href='divinity2.php?selection=ALL&searchMe=Tornado Scroll&exactsearch=on' >Tornado Scroll</a></p></td><td><p><a href='divinity2.php?selection=ALL&searchMe=Sheet of Paper&exactsearch=on' >Sheet of Paper</a></p><p><a href='divinity2.php?selection=ALL&searchMe=| Alien Air Essence |&exactsearch=on' >| Alien Air Essence |</a></p><p><a href='divinity2.php?selection=ALL&searchMe=Fancy Feather&exactsearch=on' >Fancy Feather</a></p></td><td>Tornado description not yet entered.</td></tr><tr><td><p><a href='divinity2.php?selection=ALL&searchMe=Feather&exactsearch=on' >Feather</a></p></td><td><p><a href='divinity2.php?selection=ALL&searchMe=Pillow&exactsearch=on' >Pillow</a></p><p><a href='divinity2.php?selection=ALL&searchMe=CuttingTool&exactsearch=on' >CuttingTool</a></p></td><td>description not yet entered.</td></tr></table> <script language="javascript" type="text/javascript"> function uncheckExact(obj) { document.getElementById("exactsearch").checked = false; } </script> </body>）您不必在HTML中添加任何特殊标记（在使用已编写的HTML更新网站时非常方便）。

Answer 7

在我的情况下，如果网址相同，则无效，包括$ route.reload（），$ location.path（），$ state.transitonTo（）等。

所以我的方法是使用Dummy Page，如下所示，

if( oldLocation === newLocation ) {
   // nothing worked ------------
   // window.location.reload(); it refresh the whole page
   // $route.reload();
   // $state.go($state.$current, null, { reload: true });
   // $state.transitionTo($state.current, $stateParams, {reload:true, inherit: false, notify: false } );
   // except this one
   $location.path('/dummy'); 
   $location.path($location.path());
   $scope.$apply(); 
}

你需要制作＆＃39; / dummy＆＃39;某个模块，模块没有做任何事情，它只改变url，以便下一个$ location.path（）可以应用。不要错过$ scope。$ apply（）

Answer 8

我刚刚遇到这个问题，除了它是主页＆＃39; /＆＃39;。我想要一个代码更少的简单解决方案。我刚刚利用了$ routProvider

中的.otherwise方法

所以在html链接中看起来像：

<a href="#/home">Home</a>

因为没有＆＃39; / home＆＃39;在routProvider中指定的页面，它将重定向到＆＃39; /＆＃39;通过＆＃39;否则＆＃39;方法。设置页面：

.otherwise({
redirectTo: '/'
});

希望它有助于某人

Answer 9

我使用指令方法尝试了上面的Wittaya解决方案。不知何故，该指令不断抛出错误。我最终得到了这个解决方案

HTML

<a href="javascript:void(0)" data-ng-click="stateGo('devices')">Devices</a>

控制器

    $scope.stateGo = function (stateName) {
        if ($state.$current.name === stateName) {
            $state.reload();
        } else {
            $state.go(stateName);
        }
    }

Answer 10

刚尝试添加此

$(window).on('popstate', function(event) {
//refresh server data
});

并且工作正常

angularjs - 点击与实际网址的链接时刷新

10 个答案: