it-swarm.com.ru

AngularJs: Перезагрузить страницу

<a ng-href="#" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>

Я хочу перезагрузить страницу. Как я могу это сделать?

130
user880386

Вы можете использовать метод reload службы $route. Введите $route в свой контроллер, а затем создайте метод reloadRoute в свой $scope.

$scope.reloadRoute = function() {
   $route.reload();
}

Тогда вы можете использовать его по ссылке так:

<a ng-click="reloadRoute()" class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

Этот метод приведет к перезагрузке текущего маршрута. Однако если вы хотите выполнить полное обновление, вы можете ввести $window и использовать это:

$scope.reloadRoute = function() {
   $window.location.reload();
}


Позже отредактируйте (ui-router):

Как упоминали JamesEddyEdwards и Dunc в своих ответах, если вы используете angular-ui/ui-router , вы можете использовать следующий метод для перезагрузки текущего состояния/маршрута. Просто введите $state вместо $route и получите:

$scope.reloadRoute = function() {
    $state.reload();
};
260
Alexandrin Rus

Объект window доступен через службу $window для проще для тестирования и насмешек , вы можете использовать что-то вроде:

$scope.reloadPage = function(){$window.location.reload();}

А также :

<a ng-click="reloadPage"  class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

Как примечание, я не думаю, что $ route.reload () на самом деле перезагружает страницу, но только маршрут .

51
Florian F.
 location.reload(); 

Делает трюк.

<a ng-click="reload()">

$scope.reload = function()
{
   location.reload(); 
}

Нет необходимости в маршрутах или что-нибудь просто старый JS

18
user3806549

Аналогично ответу Александрина, но с использованием $ state, а не $ route:

(Из SO ответа JimTheDev здесь .)

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

<a ng-click="reloadState()" ... 
14
Dunc

Если вы используете Angulars более продвинутый i-router , который я определенно рекомендую, то теперь вы можете просто использовать:

$state.reload();

Который по существу делает то же самое, что и ответ Данка.

9
JamesEddyEdwards

Моим решением избежать бесконечного цикла было создание другого состояния, которое произвело перенаправление:

$stateProvider.state('app.admin.main', {
    url: '/admin/main',
    authenticate: 'admin',
    controller: ($state, $window) => {
      $state.go('app.admin.overview').then(() => {
        $window.location.reload();
      });
    }
  });
2
Gucu112

Достаточно просто использовать $route.reload() (не забудьте ввести $ route в ваш контроллер), но из вашего примера вы можете просто использовать "href" вместо "ng-href":

<a href=""  class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

Вам нужно использовать только ng-href, чтобы защитить пользователя от недействительных ссылок, вызванных тем, что он щелкнул до того, как Angular заменил содержимое тегов {{}}.

1
spikeheap

На Angular 1.5 - после попытки некоторых из вышеперечисленных решений, желающих перезагрузить только данные без полного обновления страницы, у меня возникли проблемы с загрузкой данных должным образом. Однако я заметил, что когда я перехожу на другой маршрут, а затем возвращаюсь к текущему, все работает нормально, но когда я хочу перезагрузить только текущий маршрут, используя $route.reload(), тогда часть кода не выполняется должным образом. Затем я попытался перенаправить на текущий маршрут следующим образом:

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

и в конфигурации модуля добавьте еще одно 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'
     });
}])

и это прекрасно работает для меня. Он не обновляет всю страницу, а только вызывает перезагрузку текущего контроллера и шаблона. Я знаю, что это немного глупо, но это было единственное решение, которое я нашел.

1
vivanov
<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>

и в контроллере

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

и в файле маршрута

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

Итак, если идентификатор, переданный в URL-адресе, совпадает с идентификатором, полученным из функции, вызываемой щелчком якоря, просто перезагрузите его, а затем следуйте запрошенному маршруту.

Пожалуйста, помогите мне улучшить этот ответ, если это поможет. Любые, предложения приветствуются.

1
AMRESH PANDEY

Angular 2+

Я нашел это во время поиска Angular 2+, поэтому вот путь:

window.location.reload();
0
Nitin Jadhav