blocks|key|4658216|text|您可以使用$route服务的reload方法。在控制器中注入$route，然后在$scope上创建一个reloadRoute方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4658217|$scope.reloadRoute+=+function()+{
+++$route.reload();
}|code-block|syntax|javascript|4658218|然后你可以像这样在链接上使用它：|4658219|<a+ng-click="reloadRoute()"+class="navbar-brand"+title="home"+data-translate>PORTAL_NAME</a>|4658220|此方法将导致当前路由重新加载。但是，如果您想要执行完全刷新，则可以注入$window并使用：|4658221|$scope.reloadRoute+=+function()+{
+++$window.location.reload();
}|4658222|​|4658223|**稍后编辑(ui-router):**|4658224|正如JamesEddyEdwards和Dunc在他们的答案中提到的，如果您使用angular-ui/ui-router，您可以使用以下方法重新加载当前状态/路由。只需注入$state而不是$route，然后您就拥有了：|4658225|$scope.reloadRoute+=+function()+{
++++$state.reload();
};|4658226|entityMap|0|LINK|mutability|MUTABLE|url|http://angular-ui.github.io/ui-router/site/#/api/ui.router^0|5|6|E|6|U|6|14|6|1F|B|0|0|0|0|Z|7|0|0|0|0|2D|6|2M|6|13|K|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1J|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1K|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1L|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1P|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1R|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1S|8|@$9|1T|A|1U|B|C]|$9|1V|A|1W|B|C]]|D|@$9|1X|A|1Y|1|1Z]]|E|$]]|$1|Y|3|Z|5|H|7|20|8|@]|D|@]|E|$I|J]]|$1|10|3|-4|5|6|7|21|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]]]

You can use the <code>reload</code> method of the <code>$route</code> service. Inject <code>$route</code> in your controller and then create a method <code>reloadRoute</code> on your <code>$scope</code>.
<pre><code>$scope.reloadRoute = function() {
 $route.reload();
}
</code></pre>
Then you can use it on the link like this:
<pre><code>&lt;a ng-click=&quot;reloadRoute()&quot; class=&quot;navbar-brand&quot; title=&quot;home&quot; data-translate&gt;PORTAL_NAME&lt;/a&gt;
</code></pre>
This method will cause the current route to reload. If you however want to perform a full refresh, you could inject <code>$window</code> and use that:
<pre><code>$scope.reloadRoute = function() {
 $window.location.reload();
}
</code></pre>
 
**Later edit (ui-router):**
 
As mentioned by JamesEddyEdwards and Dunc in their answers, if you are using <a href="http://angular-ui.github.io/ui-router/site/#/api/ui.router" rel="nofollow noreferrer">angular-ui/ui-router</a> you can use the following method to reload the current state / route. Just inject <code>$state</code> instead of <code>$route</code> and then you have:
<pre><code>$scope.reloadRoute = function() {
 $state.reload();
};
</code></pre>

blocks|key|4658278|text|window对象是通过easier+testing+and+mocking的$window服务提供的，您可以使用以下内容：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4658279|$scope.reloadPage+=+function(){$window.location.reload();}|code-block|syntax|javascript|4658280|和：|4658281|<a+ng-click="reloadPage"++class="navbar-brand"+title="home"++data-translate>PORTAL_NAME</a>|4658282|顺便说一句，我认为$route.reload()实际上并没有重新加载页面，而是only+the+route。|4658283|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.angularjs.org/api/ng/service/window|1|http://docs.angularjs.org/api/ngRoute/service/$route^0|0|6|12|7|B|Q|0|0|0|0|0|13|E|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|H|7|18|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|19|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|Q|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

<code>window</code> object is made available through <code>$window</code> service for <a href="https://docs.angularjs.org/api/ng/service/window">easier testing and mocking</a>, you can go with something like:

<pre><code>$scope.reloadPage = function(){$window.location.reload();}
</code></pre>

And : 

<pre><code>&lt;a ng-click="reloadPage" class="navbar-brand" title="home" data-translate&gt;PORTAL_NAME&lt;/a&gt;
</code></pre>

As a side note, i don't think $route.reload() actually reloads the page, but <a href="http://docs.angularjs.org/api/ngRoute/service/$route">only the route</a>.

blocks|key|152183|text|+location.reload();+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|152184|真的很管用。|unstyled|152185|<a+ng-click="reload()">

$scope.reload+=+function()
{
+++location.reload();+
}|152186|不需要路由或任何东西，只需要简单的老式js|152187|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code> location.reload(); 
</code></pre>

Does the trick. 

<pre><code>&lt;a ng-click="reload()"&gt;

$scope.reload = function()
{
 location.reload(); 
}
</code></pre>

No need for routes or anything just plain old js

blocks|key|4658334|text|与Alexandrin的答案类似，但使用$state而不是$route：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4658335|(摘自JimTheDev的SO+answer+here。)|offset|length|4658336|$scope.reloadState+=+function()+{
+++$state.go($state.current,+{},+{reload:+true});
}

<a+ng-click="reloadState()"+...+|code-block|syntax|javascript|4658337|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/25206754/188926^0|0|N|4|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Similar to Alexandrin's answer, but using $state rather than $route:

(From JimTheDev's SO answer <a href="https://stackoverflow.com/a/25206754/188926">here</a>.)

<pre><code>$scope.reloadState = function() {
 $state.go($state.current, {}, {reload: true});
}

&lt;a ng-click="reloadState()" ... 
</code></pre>

blocks|key|4658367|text|如果使用Angulars更高级的ui-router，那么你现在可以简单地使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4658368|$state.reload();|code-block|syntax|javascript|4658369|这基本上和邓克的答案是一样的。|4658370|entityMap|0|LINK|mutability|MUTABLE|url|http://angular-ui.github.io/ui-router/site/#/api/ui.router^0|G|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

If using Angulars more advanced <a href="http://angular-ui.github.io/ui-router/site/#/api/ui.router">ui-router</a> which I'd definitely recommend then you can now simply use:

<pre><code>$state.reload();
</code></pre>

Which is essentially doing the same as Dunc's answer.

blocks|key|4658656|text|我避免无限循环的解决方案是创建另一个进行了重定向的状态：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4658657|$stateProvider.state('app.admin.main',+{
++++url:+'/admin/main',
++++authenticate:+'admin',
++++controller:+($state,+$window)+=>+{
++++++$state.go('app.admin.overview').then(()+=>+{
++++++++$window.location.reload();
++++++});
++++}
++});|code-block|syntax|javascript|4658658|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My solution to avoid the infinite loop was to create another state which have made the redirection:

<pre><code>$stateProvider.state('app.admin.main', {
 url: '/admin/main',
 authenticate: 'admin',
 controller: ($state, $window) =&gt; {
 $state.go('app.admin.overview').then(() =&gt; {
 $window.location.reload();
 });
 }
 });
</code></pre>

blocks|key|152380|text|这可以通过调用JavaScript中的reload()方法来完成。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|152381|location.reload();|code-block|syntax|javascript|152382|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This can be done by calling the reload() method in JavaScript.
<pre><code>location.reload();
</code></pre>

blocks|key|4658245|text|使用$route.reload()很简单(别忘了把$route注入你的控制器)，但是在你的例子中，你可以使用"href“而不是"ng-href"：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4658246|<a+href=""++class="navbar-brand"+title="home"++data-translate>PORTAL_NAME</a>|code-block|syntax|javascript|4658247|你只需要使用ng-href来保护用户，防止他们在Angular替换{{+}}标签的内容之前点击导致的无效链接。|4658248|entityMap^0|2|F|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

It's easy enough to just use <code>$route.reload()</code> (don't forget to inject $route into your controller), but from your example you could just use "href" instead of "ng-href":

<pre><code>&lt;a href="" class="navbar-brand" title="home" data-translate&gt;PORTAL_NAME&lt;/a&gt;
</code></pre>

You only need to use ng-href to protect the user from invalid links caused by them clicking before Angular has replaced the contents of the {{ }} tags.

blocks|key|152219|text|在Angular+1.5上-在尝试了上面的一些解决方案后，我只想重新加载数据，而不是整页刷新，我遇到了正确加载数据的问题。我注意到，当我转到另一个路由，然后返回到当前路由时，一切正常，但是当我只想使用$route.reload()重新加载当前路由时，一些代码就不能正确执行。然后，我尝试通过以下方式重定向到当前路由：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|152220|$scope.someFuncName+=+function+()+{
++++//go+to+another+route
++++$location.path('/another-route');
};|code-block|syntax|javascript|152221|在模块配置中，添加另一个when|152222|.config(['$routeProvider',+function($routeProvider)+{
+++++$routeProvider.when('/first-page',+{
+++++++++templateUrl:+'/first-template',
+++++++++controller:+'SomeCtrl'
+++++}).when('/another-route',+{//this+is+the+new+"when"
+++++++++redirectTo:+'/first-page'
+++++});
}])|152223|它对我来说工作得很好。它不会刷新整个页面，而只是重新加载当前的控制器和模板。我知道这有点老生常谈，但这是我找到的唯一解决方案。|152224|entityMap^0|2S|F|0|0|C|4|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

On Angular 1.5 - after trying some of the above solutions wanting to reload only the data with no full page refresh, I had problems with loading the data properly. I noticed though, that when I go to another route and then I return back to the current, everything works fine, but when I want to only reload the current route using <code>$route.reload()</code>, then some of the code is not executed properly. Then I tried to redirect to the current route in the following way:

<pre><code>$scope.someFuncName = function () {
 //go to another route
 $location.path('/another-route');
};
</code></pre>

and in the module config, add another <code>when</code>:

<pre><code>.config(['$routeProvider', function($routeProvider) {
 $routeProvider.when('/first-page', {
 templateUrl: '/first-template',
 controller: 'SomeCtrl'
 }).when('/another-route', {//this is the new "when"
 redirectTo: '/first-page'
 });
}])
</code></pre>

and it works just fine for me. It does not refresh the whole page, but only causes the current controller and template to reload. I know it's a bit hacky, but that was the only solution I found.

blocks|key|4658615|text|<a+title="Pending+Employee+Approvals"+href=""+ng-click="viewPendingApprovals(1)">
++++++++++++++++++++<i+class="fa+fa-user"+aria-hidden="true">
++++++++++++++++++++<span+class="button_badge">{{pendingEmployeeApprovalCount}}
++++++++++++++++</a>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4658616|在控制器中|unstyled|4658617|+$scope.viewPendingApprovals+=+function(type)+{
++++++++++++++++if+(window.location.hash.substring(window.location.hash.lastIndexOf('/')+%2B+1,+window.location.hash.length)+==+type)+{
++++++++++++++++++++location.reload();
++++++++++++++++}+else+{
++++++++++++++++++++$state.go("home.pendingApproval",+{+id:+sessionStorage.typeToLoad+});
++++++++++++++++}
++++++++++++};|4658618|和在路由文件中|4658619|.state('home.pendingApproval',+{
++++++++url:+'/pendingApproval/:id',
++++++++templateUrl:+'app/components/approvals/pendingApprovalList.html',
++++++++controller:+'pendingApprovalListController'
++++})|4658620|因此，如果在url中传递的id与通过单击锚点调用的函数的id相同，则只需重新加载，否则遵循请求的路由。|4658621|如果这是有帮助的，请帮助我改进这个答案。欢迎提出任何建议。|4658622|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|F|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<pre><code>&lt;a title="Pending Employee Approvals" href="" ng-click="viewPendingApprovals(1)"&gt;
 &lt;i class="fa fa-user" aria-hidden="true"&gt;&lt;/i&gt;
 &lt;span class="button_badge"&gt;{{pendingEmployeeApprovalCount}}&lt;/span&gt;
 &lt;/a&gt;
</code></pre>

and in the controller

<pre><code> $scope.viewPendingApprovals = function(type) {
 if (window.location.hash.substring(window.location.hash.lastIndexOf('/') + 1, window.location.hash.length) == type) {
 location.reload();
 } else {
 $state.go("home.pendingApproval", { id: sessionStorage.typeToLoad });
 }
 };
</code></pre>

and in the route file

<pre><code>.state('home.pendingApproval', {
 url: '/pendingApproval/:id',
 templateUrl: 'app/components/approvals/pendingApprovalList.html',
 controller: 'pendingApprovalListController'
 })
</code></pre>

So, If the id passed in the url is same as what is coming from the function called by clicking the anchor, then simply reload, else folow the requested route.

Please help me improve this answer, if this is helps. Any, suggestions are welcome.

blocks|key|4658686|text|这可以通过在纯JavaScript中调用window对象的reload()方法来完成|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4658687|window.location.reload();|code-block|syntax|javascript|4658688|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This can be done by calling the reload() method of the window object in plain JavaScript
<pre><code>window.location.reload();
</code></pre>

blocks|key|152357|text|我建议参考这个页面。官方建议|type|unstyled|depth|inlineStyleRanges|entityRanges|data|152358|https://docs.angularjs.org/guide/$location|offset|length|152359|​|152360|📷|atomic|152361|152362|entityMap|0|LINK|mutability|MUTABLE|url|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/02b0b4aff69d03c83d1445b8bcdd07c3.png|imageAlt^0|0|0|16|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|K|3|G|5|6|7|18|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|C]]|S|$5|T|P|U|A|$V|W|X|-4]]]]

I would suggest to refer the page. Official suggestion
<a href="https://docs.angularjs.org/guide/$location" rel="nofollow noreferrer">https://docs.angularjs.org/guide/$location</a>
<a href="https://i.stack.imgur.com/hX7Aq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hX7Aq.png" alt="enter image description here" /></a>

<pre><code>&lt;a ng-href="#" class="navbar-brand" title="home" data-translate&gt;PORTAL_NAME&lt;/a&gt;
</code></pre>

I want to reload the page. How can I do this?

AngularJs: Reload page

路由

<a ng-href="#" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>我想重新加载页面。我该怎么做呢？

问AngularJs:重新加载页面
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs:重新加载页面EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs:重新加载页面
EN