49

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

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

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

我也在谷歌群组上问过。

更新：

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

正如 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因此 Angular 可以像往常一样处理它，当您将鼠标悬停在链接上时，您可以看到 url。此外，当用户单击它并且链接的路径与当前路径相同时，它会重新加载路由。

4

10 回答 10

77

将 /（斜杠）添加到路由配置中定义的 url

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

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

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

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

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

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

希望这对你有用。

于 2013-07-11T08:40:28.127 回答
64

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

例如

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

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

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

Html链接重写

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

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

当用户点击此链接时，

  • 在旧版浏览器中，URL 更改为/index.html#!/some?foo=bar
  • 在现代浏览器中，URL 更改为/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>

于 2013-03-08T09:51:41.007 回答
21

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

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

于 2012-06-29T18:59:23.580 回答
8

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

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

注意重新加载选项。

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

于 2015-09-25T14:22:41.650 回答
6

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

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();
            }
        });
    }   
});
于 2013-10-01T07:25:14.803 回答
1

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

.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>链接（不带属性）并且您在属性中使用相对链接（例如，而不是）您不必向 HTML 添加任何特殊标记（在使用 HTML 更新站点时会派上用场已经写好了）。targethref/homehttp://example.com/home

于 2017-09-26T16:18:16.503 回答
0

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

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

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

您需要在某处制作“/dummy”模块，该模块不做任何事情，它只会更改 url，以便可以应用下一个 $location.path()。不要错过 $scope.$apply()

于 2014-07-03T22:33:16.270 回答
0

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

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

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

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

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

希望它可以帮助某人

于 2015-03-28T17:06:07.033 回答
0

我使用指令方法尝试了上述 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);
        }
    }
于 2016-09-14T19:30:58.257 回答
-3

刚刚尝试添加这个

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

它工作正常

于 2015-02-20T04:09:00.363 回答