Cách tải lại hoặc kết xuất lại toàn bộ trang bằng AngularJS

Sau khi hiển thị toàn bộ trang dựa trên một số bối cảnh người dùng và đã thực hiện một số $httpyêu cầu, tôi muốn người dùng có thể chuyển đổi bối cảnh và kết xuất lại mọi thứ một lần nữa (gửi lại tất cả các $httpyêu cầu, v.v.). Nếu tôi chỉ chuyển hướng người dùng ở một nơi khác, mọi thứ sẽ hoạt động đúng:

$scope.on_impersonate_success = function(response) {
  //$window.location.reload(); // This cancels any current request
  $location.path('/'); // This works as expected, if path != current_path
};

$scope.impersonate = function(username) {
  return auth.impersonate(username)
    .then($scope.on_impersonate_success, $scope.on_auth_failed);
};

Nếu tôi sử dụng $window.location.reload(), thì một số $httpyêu cầu auth.impersonate(username)đang chờ phản hồi sẽ bị hủy, vì vậy tôi không thể sử dụng yêu cầu đó. Ngoài ra, hack $location.path($location.path())cũng không hoạt động (không có gì xảy ra).

Có cách nào khác để kết xuất lại trang mà không phát hành lại tất cả các yêu cầu một cách thủ công không?

Đối với bản ghi, để buộc góc phải kết xuất lại trang hiện tại, bạn có thể sử dụng:

$route.reload();

Theo tài liệu của AngularJS :

Làm cho dịch vụ $ tuyến tải lại tuyến hiện tại ngay cả khi vị trí $ không thay đổi.

Do đó, ngView tạo ra phạm vi mới, khôi phục lại bộ điều khiển.

$route.reload()sẽ xác nhận lại các bộ điều khiển nhưng không phải các dịch vụ. Nếu bạn muốn đặt lại toàn bộ trạng thái của ứng dụng của mình, bạn có thể sử dụng:

$window.location.reload();

Đây là một phương thức DOM tiêu chuẩn mà bạn có thể truy cập khi tiêm dịch vụ $ window .

Nếu bạn muốn chắc chắn tải lại trang từ máy chủ, ví dụ như khi bạn đang sử dụng Django hoặc một khung web khác và bạn muốn kết xuất phía máy chủ mới, hãy chuyển truenhư một tham số reload, như được giải thích trong tài liệu . Vì điều đó đòi hỏi sự tương tác với máy chủ, nó sẽ chậm hơn nên chỉ thực hiện khi cần thiết

Góc 2

Ở trên áp dụng cho góc 1. Tôi không sử dụng góc 2, trông giống như các dịch vụ khác nhau ở đó, có Router, Locationvà DOCUMENT. Tôi đã không kiểm tra các hành vi khác nhau ở đó

Để tải lại trang cho đường dẫn cụ thể: -

$location.path('/path1/path2');
$route.reload();

Nếu bạn đang sử dụng ui-router góc thì đây sẽ là giải pháp tốt nhất.

$scope.myLoadingFunction = function() {
    $state.reload();
};

Có lẽ bạn đã quên thêm "$ route" khi khai báo các phụ thuộc của Trình điều khiển của bạn:

app.controller('NameCtrl', ['$scope','$route', function($scope,$route) {   
   // $route.reload(); Then this should work fine.
}]);

Chỉ cần tải lại mọi thứ, sử dụng window.location.reload (); với angularjs

Kiểm tra ví dụ làm việc

HTML

<div ng-controller="MyCtrl">  
<button  ng-click="reloadPage();">Reset</button>
</div>

góc cạnh

var myApp = angular.module('myApp',[]);

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

http://jsfiddle.net/HB7LU/22324/

Nếu bạn muốn làm mới bộ điều khiển trong khi làm mới bất kỳ dịch vụ nào bạn đang sử dụng, bạn có thể sử dụng giải pháp này:

• Tiêm $ bang

I E

app.controller('myCtrl',['$scope','MyService','$state', function($scope,MyService,$state) {

    //At the point where you want to refresh the controller including MyServices

    $state.reload();

    //OR:

    $state.go($state.current, {}, {reload: true});
}

Điều này sẽ làm mới bộ điều khiển và HTML cũng như bạn có thể gọi nó là Làm mới hoặc Kết xuất lại .

Trước Angular 2 (AngularJs)

Qua tuyến đường

$route.reload();

Nếu bạn muốn tải lại toàn bộ Ứng dụng

$window.location.reload();

Góc 2+

import { Location } from '@angular/common';

constructor(private location: Location) {}

ngOnInit() {  }

load() {
    this.location.reload()
}

Hoặc là

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}

Giải pháp dễ nhất tôi nghĩ là

thêm '/' vào tuyến đường muốn được tải lại mỗi lần khi quay lại.

ví dụ:

thay vì sau đây

$routeProvider
  .when('/About', {
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })

sử dụng,

$routeProvider
  .when('/About/', { //notice the '/' at the end 
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })

Hãy thử một trong những điều sau đây:

$route.reload(); // don't forget to inject $route in your controller
$window.location.reload();
location.reload();

Tôi đã nhận được mã làm việc này để xóa bộ nhớ cache và tải lại trang

Lượt xem

        <a class="btn" ng-click="reload()">
            <i class="icon-reload"></i> 
        </a>

Bộ điều khiển

Các đầu phun: $ scope, $ state, $ stateParams, $ templateCache

       $scope.reload = function() { // To Reload anypage
            $templateCache.removeAll();     
            $state.transitionTo($state.current, $stateParams, { reload: true, inherit: true, notify: true });
        };

Sử dụng mã sau đây mà không cần thông báo tải lại thân mật cho người dùng. Nó sẽ hiển thị trang

var currentPageTemplate = $route.current.templateUrl;
$templateCache.remove(currentPageTemplate);
$window.location.reload();

Tôi đã chiến đấu khó khăn với vấn đề này trong nhiều tháng và giải pháp duy nhất hiệu quả với tôi là:

var landingUrl = "http://www.ytopic.es"; //URL complete
$window.location.href = landingUrl;