Javascript angularjs - 单击带有实际 url 的链接时刷新

angularjs - refresh when clicked on link with actual url

提问by davekr

I use routeProvider to define controlers and templates for my urls.

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

When I click on the link, which has the same url as is the actual location, nothing happens. I would like the reload()method to be called if a user clicks on such a link even if the location hasn't changed. In other words, if I set the location to the same value, I would like it to behave the same as if I would set it to different value.

当我单击与实际位置具有相同 url 的链接时，没有任何反应。reload()如果用户点击这样的链接，即使位置没有改变，我也希望调用该方法。换句话说，如果我将位置设置为相同的值，我希望它的行为与我将其设置为不同的值一样。

Is there a way to configure routeProvider or locationProvider to do it automatically? Or what is the right approach to do this? This is stadard behaviour in round trip applications, but how to do it in angularjs?

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

I've asked it on google groupsas well.

我也在谷歌组上问过。

UPDATE:

更新：

This question is getting lots of views, so I will try to explain how I solved my problem.

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

I created a custom directive for linking in my app as Renan Tomal Fernandes suggested in comments.

我创建了一个自定义指令，用于在我的应用程序中进行链接，正如 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();
                    });
                });
            }
        });
    }
}]);

The directive is then used for all links in my app I want to have this functionality.

然后将该指令用于我希望拥有此功能的应用程序中的所有链接。

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

What this directive does is that it sets the hrefattribute for you based on di-hrefattribute so angular can handle it like always and you can see the url when you hover over the link. Furthermore when user clicks on it and the link's path is the same as the current path it reloads the route.

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

采纳答案by Renan Tomal Fernandes

you should use $route.reload()to force the reload.

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

I don't know if is there a 'automatic' way to do this, but you can use ng-click on these links

我不知道是否有一种“自动”的方式来做到这一点，但你可以使用 ng-click 这些链接

回答by public0821

Add a / (slash) to the defined url in the route configuration

在路由配置中给定义的url添加/（斜线）

I met a similar problem today, I have a link in my web page and when I click it, I want the ng-view reload each time, so that I can refresh data from server. But if the url location doesn't change, angular doesn't reload the ng-view.

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

Finally, i found a solution to this problem. In my web page, I set the link href to:

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

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

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

But in the route config, I set:

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

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

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

The different is the last slash in url. When I click href="#/test"for the first time, angular redirect the url to #/test/, and load ng-view. when i click it second time, because the current url is #/test/, it's not equal to the url in the link (href="#/test") I clicked, so Angular triggers the location change method and reloads the ng-view, in addition Angular redirects the url to #/test/again. next time i click the url, angular does the same thing again. Which is exactly what I wanted.

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

Hope this was useful for you.

希望这对你有用。

回答by Andy

You can add a _target='_self'on the link to forces the page to reload.

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

e.g.

例如

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

Tested with version 1.0.5 and 1.2.15 on IE and Firefox.

在 IE 和 Firefox 上使用 1.0.5 和 1.2.15 版进行测试。

Here's more information from AngularJS site:

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

Html link rewriting

Html 链接重写

When you use HTML5 history API mode, you will need different links in different browsers, but all you have to do is specify regular URL links, such as:

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

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

When a user clicks on this link,

当用户点击此链接时，

• In a legacy browser, the URL changes to /index.html#!/some?foo=bar
• In a modern browser, the URL changes to /some?foo=bar

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

In cases like the following, links are not rewritten; instead, the browser will perform a full page reload to the original link.

在以下情况下，链接不会被重写；相反，浏览器将执行完整页面重新加载到原始链接。

• Links that contain target element Example: <a href="/ext/link?a=b" target="_self">link</a>

• Absolute links that go to a different domain Example: <a href="http://angularjs.org/">link</a>

• Links starting with '/' that lead to a different base path when base is defined Example: <a href="/not-my-base/link">link</a>

• 包含目标元素的链接示例： <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>

回答by Robin van der Knaap

For people who are using AngularUI Router. You can use something like this:

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

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

Notice the reload option.

注意重新加载选项。

Found the answer here: https://stackoverflow.com/a/29384813/426840

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

回答by Wittaya

From @Renan Tomal Fernandes answer. following is an example

来自@Renan Tomal Fernandes 的回答。下面是一个例子

HTML

HTML

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

JS

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

回答by Márton Tamás

I think it's a simpler approach.

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

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

Assuming You want to make all basic <a>links (without targetattribute) reload on click and You use relative links in the hrefattribute (e.g. /homeinstead of http://example.com/home) You don't have to add any special markup to your HTML (comes handy when updating a site with HTML already written).

假设您希望在点击时重新加载所有基本<a>链接（无target属性），并且您在href属性中使用相对链接（例如，/home而不是http://example.com/home） 您不必向 HTML 添加任何特殊标记（使用 HTML 更新站点时很方便已经写好了）。

回答by Jeson Martajaya

I tried Wittaya's solution above using directive approach. Somehow the directive keeps throwing error. I end up with this solution

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

HTML

HTML

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

Controller

控制器

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

回答by Elie Kim

In my case if the url is same, nothing worked including $route.reload(), $location.path(), $state.transitonTo() etc.

在我的情况下，如果 url 相同，则没有任何工作，包括 $route.reload()、$location.path()、$state.transitonTo() 等。

So my approach was Using Dummy Page as follows,

所以我的方法是使用虚拟页面如下，

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

You need to make '/dummy' module somewhere, the module doesn't do anything, it only change url so that next $location.path() can be applied. Don't miss $scope.$apply()

您需要在某处创建 '/dummy' 模块，该模块不执行任何操作，它仅更改 url 以便可以应用下一个 $location.path()。不要错过 $scope.$apply()

回答by Olivier Medor

I ran into this issue a moment ago, except for it was the home page '/'. I wanted a simple solution with less code. I just took advantage of the .otherwise method in the $routProvider

我刚才遇到了这个问题，除了它是主页“/”。我想要一个代码更少的简单解决方案。我只是利用了 $routProvider 中的 .otherwise 方法

So in the html link looks like:

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

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

since there is no '/home' page specified in the routProvider it will redirect to '/' via the 'otherwise' method. page with this set up:

由于在 routProvider 中没有指定“/home”页面，它将通过“otherwise”方法重定向到“/”。具有此设置的页面：

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

Hope it helps someone

希望它可以帮助某人

回答by sib

Just tried adding this

刚刚尝试添加这个

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

and it works fine

它工作正常