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

Question

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

当我点击与实际位置具有相同网址的链接时，没有任何反应。 如果用户点击这样的链接，即使位置没有改变，我希望调用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>

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

Answer 1

在路由配置中为定义的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"时，angular将URL重定向到#/test/ ，并加载ng-view。 当我第二次点击它时，因为当前网址是#/test/ ，它不等于我点击的链接中的网址（ href="#/test" ），所以Angular会触发位置更改方法并重新加载ng-另外，Angular将URL重定向到#/test/ 。 下次我点击网址时，angular再次做同样的事情。 这正是我想要的。

希望这对你有用。

Answer 2

您可以在链接上添加_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>

Answer 3

你应该使用$ route.reload（）来强制重新加载。

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

Answer 4

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

<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的回答 。 以下是一个例子

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中添加任何特殊标记（在更新已编写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(); 
}

你需要在某处创建'/ dummy'模块，模块不做任何事情，它只更改url以便可以应用下一个$ location.path（）。 不要错过$ scope。$ apply（）

Answer 8

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

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

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

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

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

它工作正常