javascript AngularJS 路由控制器不重新加载

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21125914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 20:08:05  来源:igfitidea点击:

AngularJS Route Controller Not Reloading

javascriptangularjslocationroutes

提问by Jonno

I have a very simple AngularJS app that has two routes in it:

我有一个非常简单的 AngularJS 应用程序,其中有两条路线:

#/search
#/results

When I navigate from one route to another everything works as I'd expected. Any resources that are needed are fetched and the content is displayed perfectly.

当我从一条路线导航到另一条路线时,一切都如我所料。获取所需的任何资源并完美显示内容。

The problem is when I navigate from one route to the same route (I.e., #/results to #/results) absolutely nothing happens. I understand from the browser's perspective nothing has happened but I'd really like AngularJS to reload the content.

问题是当我从一条路线导航到同一条路线(即,#/results 到 #/results)时,绝对没有任何反应。我从浏览器的角度理解什么都没有发生,但我真的很希望 AngularJS 重新加载内容。

This must be very easy but I'm drawing blanks on this. Can someone please shed some light on this for me?

这一定很容易,但我在这上面画了空白。有人可以帮我解释一下吗?

Thanks,

谢谢,

Jon

乔恩

回答by Ilan Frumer

When you navigate to the same page, the browserignores it.
Angular.js has nothing to do with the default behavior of <a href="">.

当您导航到同一页面时,浏览器会忽略它。
Angular.js 与<a href="">.

What you can do, is to create a custom directivewhich:

您可以做的是创建一个自定义指令,该指令

  • use $route.reload()to reload the current view (route).
  • use $location.path(newPath)for navigating to other views.
  • 用于$route.reload()重新加载当前视图(路由)。
  • 使用$location.path(newPath)导航到其他视图。

I made an example:

我做了一个例子

app.directive('xref',function($route, $location){
  return {
    link: function(scope, elm,attr){
      elm.on('click',function(){
        if ( $location.path() === attr.xref ) {
          $route.reload();
        } else {
          scope.$apply(function(){
            $location.path(attr.xref);
          });
        }      
      });
    }
  };
});

In your view just create:

在您看来,只需创建:

<a xref="/">Home</a>
<a xref="/links">Links</a>

回答by gkalpak

You could check if the current route is the same as the "destination" route and call $route's reload()method:

你可以检查当前的路线是一样的“目的地”的路线和调用$routereload()方法:

reload()
Causes $route service to reload the current route even if $location hasn't changed.
As a result of that, ngView creates new scope, reinstantiates the controller.

reload() 使
$route 服务重新加载当前路由,即使 $location 没有改变。
结果,ngView 创建了新的作用域,重新实例化了控制器。



E.g.:

例如:

In HTML:

在 HTML 中:

<a href="" ng-click="toResults()">Results</a>

In controller:

在控制器中:

// ...first have `$location` and `$route` injected...
$scope.toResults = function () {
    var dstPath = '/results';
    if ($location.path() === dstPath) {
        $route.reload()  ;
    } else {
        $location.path(dstPath);
    }
}

回答by Archna

I used the routeparams property as well to compare the url parameters and it worked like a charm. In case anyone faces this problem again, here's how I resolved it:

我也使用了 routeparams 属性来比较 url 参数,它的作用就像一个魅力。如果有人再次遇到这个问题,我是这样解决的:

 if ($location.path() === '/destination' && $routeParams.Name == Name) {
                $route.reload();
            }
            else {
                $location.path('/destination').search({ Name: Name });
            }