<a ng-href="#" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>
Chcę ponownie załadować stronę. W jaki sposób mogę to zrobić?
<a ng-href="#" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>
Chcę ponownie załadować stronę. W jaki sposób mogę to zrobić?
Odpowiedzi:
Możesz skorzystać z reload
metody $route
usługi. Wprowadzić $route
w kontrolerze, a następnie utworzyć metodę reloadRoute
na własną $scope
.
$scope.reloadRoute = function() {
$route.reload();
}
Następnie możesz użyć go na linku w ten sposób:
<a ng-click="reloadRoute()" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>
Ta metoda spowoduje ponowne załadowanie aktualnej trasy. Jeśli jednak chcesz wykonać pełne odświeżenie, możesz wstrzyknąć $window
i użyć tego:
$scope.reloadRoute = function() {
$window.location.reload();
}
Późniejsza edycja (ui-router):
Jak wspomnieli JamesEddyEdwards i Dunc w swoich odpowiedziach, jeśli używasz angular -ui / ui-router , możesz użyć następującej metody, aby ponownie załadować bieżący stan / trasę. Po prostu wstrzyknij $state
zamiast, $route
a otrzymasz:
$scope.reloadRoute = function() {
$state.reload();
};
window
obiekt jest udostępniany za pośrednictwem $window
serwisu w celu łatwiejszego testowania i mockowania , możesz skorzystać z czegoś takiego:
$scope.reloadPage = function(){$window.location.reload();}
I :
<a ng-click="reloadPage" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>
Na marginesie, nie sądzę, aby $ route.reload () faktycznie przeładowywała stronę, ale tylko trasę .
$window
zamiast window
.
$window
dokumentacji , głównie dlatego, że reloadPage
byłby (lepiej) testowalny, gdy używa $window
.
location.reload();
Zrób sztuczkę.
<a ng-click="reload()">
$scope.reload = function()
{
location.reload();
}
Nie potrzebujesz tras ani niczego po prostu starego js
Jeśli używasz bardziej zaawansowanego routera Angulars, który zdecydowanie polecam, możesz teraz po prostu użyć:
$state.reload();
Co zasadniczo robi to samo, co odpowiedź Dunca.
Moim rozwiązaniem, aby uniknąć nieskończonej pętli, było utworzenie innego stanu, który spowodował przekierowanie:
$stateProvider.state('app.admin.main', {
url: '/admin/main',
authenticate: 'admin',
controller: ($state, $window) => {
$state.go('app.admin.overview').then(() => {
$window.location.reload();
});
}
});
Angular 2+
Znalazłem to podczas wyszukiwania Angular 2+, więc oto sposób:
$window.location.reload();
Wystarczy go użyć $route.reload()
(nie zapomnij wstrzyknąć $ route do kontrolera), ale z Twojego przykładu możesz po prostu użyć „href” zamiast „ng-href”:
<a href="" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>
Wystarczy użyć ng-href, aby chronić użytkownika przed nieprawidłowymi linkami spowodowanymi kliknięciem, zanim Angular zastąpi zawartość tagów {{}}.
Na Angular 1.5 - po wypróbowaniu niektórych z powyższych rozwiązań chcących przeładować tylko dane bez pełnego odświeżania strony, miałem problemy z poprawnym załadowaniem danych. Zauważyłem jednak, że kiedy jadę na inną trasę, a potem wracam do obecnego, wszystko działa dobrze, ale gdy chcę tylko przeładować bieżącą trasę używając $route.reload()
, to część kodu nie jest poprawnie wykonywana. Następnie próbowałem przekierować na aktualną trasę w następujący sposób:
$scope.someFuncName = function () {
//go to another route
$location.path('/another-route');
};
aw konfiguracji modułu dodaj kolejny when
:
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/first-page', {
templateUrl: '/first-template',
controller: 'SomeCtrl'
}).when('/another-route', {//this is the new "when"
redirectTo: '/first-page'
});
}])
i dla mnie działa dobrze. Nie odświeża całej strony, a jedynie powoduje ponowne załadowanie bieżącego kontrolera i szablonu. Wiem, że to trochę zepsute, ale to było jedyne rozwiązanie, jakie znalazłem.
var reload = $location.url(); $location.url(''); $timeout(function() { $location.url(reload); });
; nie ma potrzeby tworzenia losowych tras. Ale byłoby interesujące zobaczyć, który kod nie jest ponownie oceniany dla Ciebie. Wygląda na to, że nawet funkcje redirectTo
i resolve
funkcje są wykonywane ponownie w normalnym trybie$route.reload()
(spójrz na console.log).
<a title="Pending Employee Approvals" href="" ng-click="viewPendingApprovals(1)">
<i class="fa fa-user" aria-hidden="true"></i>
<span class="button_badge">{{pendingEmployeeApprovalCount}}</span>
</a>
i w kontrolerze
$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 });
}
};
oraz w pliku trasy
.state('home.pendingApproval', {
url: '/pendingApproval/:id',
templateUrl: 'app/components/approvals/pendingApprovalList.html',
controller: 'pendingApprovalListController'
})
Tak więc, jeśli identyfikator przekazany w adresie URL jest taki sam, jak ten, który pochodzi z funkcji wywołanej przez kliknięcie kotwicy, po prostu załaduj ponownie, w przeciwnym razie podążaj za żądaną trasą.
Proszę, pomóż mi ulepszyć tę odpowiedź, jeśli to pomaga. Wszelkie sugestie są mile widziane.
Można to zrobić, wywołując metodę reload () w JavaScript.
location.reload();