AngularJS 路由控制器未重新加载答案

【问题标题】：AngularJS Route Controller Not ReloadingAngularJS 路由控制器未重新加载
【发布时间】：2014-02-03 05:49:29
【问题描述】：

我有一个非常简单的 AngularJS 应用程序，其中有两条路由：

#/search
#/results

当我从一条路线导航到另一条路线时，一切都按我的预期进行。获取所需的任何资源并完美显示内容。

问题是当我从一条路线导航到同一条路线（即，#/results 到 #/results）时，绝对没有任何反应。从浏览器的角度来看，我理解没有发生任何事情，但我真的希望 AngularJS 重新加载内容。

这一定很容易，但我在这上面画的是空白。有人可以帮我解释一下吗？

谢谢，

乔恩

【问题讨论】：

您明白吗，如果您重新加载页面，您的 Angular 应用程序将重新启动？
控制器应该再次运行，你是如何获取数据的？
等等，你的意思是你只是去地址栏然后按回车？或者你真的很清爽？或者实际上以某种方式改变了路径？
我的页面上有一个链接，将我的浏览器定向到#/results，因为我已经在那里了，浏览器没有做任何事情。但我希望路由能够检测到并重新加载路由？
你好安德烈。是的，我意识到重新加载作为单页应用程序的页面将重新启动应用程序。我不想重新加载页面，只是一条路线，而不必离开它然后回来。

标签： javascript angularjs location routes

【解决方案1】：

当您导航到同一页面时，浏览器会忽略它。
Angular.js 与<a href=""> 的默认行为无关。

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

使用$route.reload() 重新加载当前视图（路线）。
使用$location.path(newPath) 导航到其他视图。

我发了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);
          });
        }      
      });
    }
  };
});

在您看来，只需创建：

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

【讨论】：

我最终改用了这个简单的指令。好棒。谢谢

【解决方案2】：

您可以检查当前路线是否与“目的地”路线相同并调用$route的reload()方法：

重载()
即使 $location 没有更改，也会导致 $route 服务重新加载当前路线。
结果，ngView 创建了新的作用域，重新实例化了控制器。

例如：

在 HTML 中：

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

在控制器中：

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

【讨论】：

非常感谢。这正是我要做的。应该很容易。
我已经在我的注销控制器中注入了 $route，但是我得到了“[$injector:unpr] Unknown provider: $routeProvider
将ngRoute 模块作为您应用的依赖项。您需要的一切都在文档中。

【解决方案3】：

我还使用了 routeparams 属性来比较 url 参数，它就像一个魅力。万一有人再次遇到这个问题，我是这样解决的：

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

【讨论】：