Cara memuat ulang atau merender ulang seluruh halaman menggunakan AngularJS


299

Setelah merender seluruh halaman berdasarkan beberapa konteks pengguna dan telah membuat beberapa $httppermintaan, saya ingin pengguna dapat mengubah konteks dan merender kembali semuanya lagi (mengirim ulang semua $httppermintaan, dll). Jika saya mengarahkan ulang pengguna ke tempat lain, semuanya berfungsi dengan baik:

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

Jika saya menggunakan $window.location.reload(), maka beberapa $httppermintaan auth.impersonate(username)yang sedang menunggu balasan dibatalkan, jadi saya tidak bisa menggunakannya. Juga, peretasan $location.path($location.path())tidak berhasil (tidak ada yang terjadi).

Apakah ada cara lain untuk merender ulang halaman tanpa secara manual mengeluarkan semua permintaan lagi?


Seperti yang dikatakan Alvaro Joao di bawah ini, Anda perlu menggunakan angular-route.js agar bisa berfungsi. bennadel.com/blog/…
Yvonne Aburrow

Jawaban:


404

Sebagai catatan, untuk memaksa sudut membuat ulang halaman saat ini, Anda dapat menggunakan:

$route.reload();

Menurut dokumentasi AngularJS :

Menyebabkan layanan $ route untuk memuat ulang rute saat ini bahkan jika $ location tidak berubah.

Sebagai akibatnya, ngView menciptakan ruang lingkup baru, mengembalikan pengendali.


6
Terima kasih atas komentarnya, untuk beberapa alasan saya sepertinya mendapatkan perilaku yang sedikit berbeda ketika saya gunakan $route.reload()dibandingkan dengan refresh normal. Sebagai contoh, sebuah tab diatur untuk awalnya ditampilkan di refresh, tetapi ketika metode memuat ulang tampaknya memuat ulang halaman tanpa mengatur tab, tidak yakin apa masalahnya.
Doug Molineux

2
Apakah ini menjalankan filter / layanan juga? Mendapatkan kondisi persisten yang tidak diinginkan. Sunting: Masih dipilih untuk menjawab pertanyaan dengan benar & ini sangat membantu. Terima kasih
berikan

10
Ingatlah untuk menyuntikkan $routeke controller agar ini berfungsi.
Neel

6
@alphapilgrim Modul ngRoute tidak lagi menjadi bagian inti angular.js file. Jika Anda terus menggunakan $routeProvidermaka Anda sekarang harus memasukkan angular-route.jsdalam HTML Anda:
Alvaro Joao

3
$ state.reload () jika Anda menggunakan stateProvider
Lalit Rao

314

$route.reload()akan menginisialisasi ulang pengendali tetapi bukan layanan. Jika Anda ingin mengatur ulang seluruh kondisi aplikasi Anda, Anda dapat menggunakan:

$window.location.reload();

Ini adalah metode DOM standar yang dapat Anda akses dengan menyuntikkan layanan $ window .

Jika Anda ingin memastikan untuk memuat ulang halaman dari server, misalnya ketika Anda menggunakan Django atau kerangka kerja web lainnya dan Anda menginginkan render sisi server yang baru, berikan truesebagai parameter reload, seperti yang dijelaskan dalam dokumen . Karena itu memerlukan interaksi dengan server, itu akan lebih lambat jadi lakukan itu hanya jika perlu

Sudut 2

Di atas berlaku untuk sudut 1. Saya tidak menggunakan sudut 2, terlihat seperti layanan yang berbeda ada, ada Router, Location, dan DOCUMENT. Saya tidak menguji perilaku yang berbeda di sana


2
Perlu dicatat bahwa seseorang seharusnya tidak menyimpan status dalam layanan untuk meminta layanan untuk "restart".
andersonvom

19
Siapa yang mengatakan itu? Di mana orang seharusnya menyimpan data cache?
danza

5
Saya menemukan banyak bug karena data disimpan dalam layanan, menjadikannya stateful daripada stateless. Kecuali jika kita berbicara tentang layanan caching (dalam hal ini, akan ada antarmuka untuk menyiramnya), saya akan menyimpan data dari layanan dan di controller. Misalnya, seseorang dapat menyimpan data dalam penyimpanan lokal, dan menggunakan layanan untuk mengaksesnya. Ini akan membebaskan layanan dari menyimpan data secara langsung di dalamnya.
andersonvom

2
@danza Di mana orang seharusnya menyimpan data yang di-cache? ... objek model? Howver Angular telah melakukan pekerjaan yang mengerikan dalam penamaan konstituen MVCS mereka. Saya menyimpan objek model injeksi melalui API module.value. Kemudian berbagai API yang saya definisikan pada layanan yang mengubah objek model bekerja lebih seperti perintah.
jusopi

2
Tentu, itu akan berhasil, tetapi itu bukan praktik yang baik. Lihat dokumentasi tentang $ window , alasan penggunaannya dijelaskan di awal: Walaupun jendela tersedia secara global dalam JavaScript, ini menyebabkan masalah-masalah yang dapat diuji, karena ini adalah variabel global. Dalam sudut kami selalu merujuknya melalui layanan $ window, sehingga mungkin diganti, dihapus atau diejek untuk pengujian
danza

38

Untuk memuat ulang halaman untuk jalur rute tertentu: -

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

6
Tidak tahu mengapa tetapi metode .reload () tampaknya tidak berfungsi di sini. Itu tidak realod apa-apa.
mircobabini

28

Jika Anda menggunakan ui-router sudut, ini akan menjadi solusi terbaik.

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

Dalam proyek cli saya setelah penerapan ke shared hosting. Ketika saya memuat ulang proyek saya itu memberikan kesalahan 404 untuk menyelesaikan ini telah digunakan. Jika saya menambahkan 'gunakan hash', maka itu berfungsi dengan '#', tetapi saya tidak ingin ini, apakah ada cara itu dapat diselesaikan.
T. Shashwat

24

Mungkin Anda lupa menambahkan "$ route" ketika mendeklarasikan dependensi dari Controller Anda:

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

9

Hanya untuk memuat ulang semuanya, gunakan window.location.reload (); dengan angularjs

Lihat contoh kerja

HTML

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

angularJS

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

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

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


7

Jika Anda ingin menyegarkan pengontrol saat menyegarkan layanan apa pun yang Anda gunakan, Anda dapat menggunakan solusi ini:

  • Suntikkan $ state

yaitu

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

Ini akan menyegarkan controller dan HTML juga Anda bisa menyebutnya Refresh atau Re-Render .


2
ini untuk ui router bukan untuk angular.
dgzornoza

6

Sebelum Angular 2 (AngularJs)

Melalui rute

$route.reload();

Jika Anda ingin memuat ulang seluruh Aplikasi

$window.location.reload();

2 Sudut

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

constructor(private location: Location) {}

ngOnInit() {  }

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

Atau

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}

FYI - Angular 7: "Property 'reload' tidak ada pada tipe 'Location'".
ACEG

@Cristina terima kasih informasi Anda. Saya menggunakan ini sebelum 7 sudut
Thilina Sampath

5

Solusi termudah yang saya pikir adalah,

tambahkan '/' ke rute yang ingin dimuat ulang setiap kali kembali.

misalnya:

bukannya yang berikut ini

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

menggunakan,

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

2
@PardeepJain Ini bekerja untuk saya. Itu sebabnya ini adalah jawaban. Apakah Anda menurunkan jawaban saya?
diyoda_

1
tidak tidak sama sekali, jawaban Anda tidak terlalu buruk untuk di-downvote. luar biasa saya tidak tahu kenapa sama tidak bekerja untuk saya di angular2.
Pardeep Jain

2
Solusi sempurna. Terima kasih!
simon

Ini berfungsi bahkan jika jalur asli Anda adalah akar dari aplikasi - /: O Rute saya sekarang terlihat seperti ini://
MadPhysicist

Dalam Angular 6 berfungsi setelah menggunakan # sama dapat digunakan untuk Angular2 juga. berpikir begitu
T. Shashwat

5

Coba salah satu dari yang berikut:

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

4

Saya mendapatkan kode ini untuk menghapus cache dan memuat ulang halaman

Melihat

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

Pengendali

Injector: $ scope, $ state, $ stateParams, $ templateCache

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

3

Gunakan kode berikut tanpa pemberitahuan reload yang intim kepada pengguna. Itu akan membuat halaman

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

-8

Saya telah berjuang keras dengan masalah ini selama berbulan-bulan, dan satu-satunya solusi yang bekerja untuk saya adalah ini:

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

4
Ini hampir tidak berbeda dari melakukan apa $window.location.reload()yang OP secara khusus sebutkan tidak bekerja dengan baik dalam kasusnya.
Semua Pekerja Sangat Penting
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.