Bagaimana cara memuat ulang keadaan saat ini?

333

Saya menggunakan Angular UI Router dan ingin memuat ulang keadaan saat ini dan menyegarkan semua data / menjalankan kembali pengontrol untuk keadaan saat ini dan orang tuanya.

Saya memiliki 3 level negara: directory.organisations.details

directory.organisations berisi tabel dengan daftar organisasi. Mengklik suatu item di tabel memuat direktori.organisations.detail dengan $ StateParams yang meneruskan ID item tersebut. Jadi dalam kondisi detail, saya memuat detail untuk item ini, mengeditnya dan kemudian menyimpan data. Semuanya baik-baik saja sejauh ini.

Sekarang saya perlu memuat ulang keadaan ini dan menyegarkan semua data.

Saya telah mencoba:

 $state.transitionTo('directory.organisations');

Yang masuk ke keadaan induk tetapi tidak memuat ulang controller, saya kira karena path belum berubah. Idealnya saya hanya ingin tetap dalam status directory.organisations.details dan me-refresh semua data di induk juga.

Saya juga sudah mencoba:

$state.reload()

Saya telah melihat ini di WIKI API untuk $ state.reload "(bug dengan pengontrol memulihkan kembali sekarang, segera perbaiki)."

Setiap bantuan akan dihargai?

Holland Risley
sumber
7
Saya telah memecahkan ini sebagai berikut: $ state.transitionTo ($ state.current, $ stateParams, {reload: true, inherit: false, notify: true});
Holland Risley
1
di mana menambahkan kode ini?
Manoj G
Jadi bug sudah diperbaiki sekarang? github.com/angular-ui/ui-router/wiki/…
jchnxu
Di mana kode $state.transitionTo($state.current, $stateParams, {reload:true, inherit:false})harus ditambahkan? Memiliki masalah yang sama dengan ini menyatakan reload saya kehilangan semua data.
Evan Burbidge

Jawaban:

565

Saya menemukan ini sebagai cara kerja tersingkat untuk menyegarkan dengan ui-router:

$state.go($state.current, {}, {reload: true}); //second parameter is for $stateParams

Pembaruan untuk versi yang lebih baru:

$state.reload();

Yang merupakan alias untuk:

$state.transitionTo($state.current, $stateParams, { 
  reload: true, inherit: false, notify: true
});

Dokumentasi: https://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state#methods_reload

Rohan
sumber
21
Mungkin perlu dicatat bahwa tidak ada yang benar-benar memuat ulang halaman juga. Jika Anda ingin memuat ulang negara DAN halaman, ui-routersaya kira tidak ada metode untuk itu. Lakukan window.location.reload(true).
SimplGy
15
@SimpleAsCouldBe jika Anda ingin lebih sudut tentang hal itu, Anda bisa melakukannya $window.location.reload();. Meskipun ini tampaknya sedikit berlebihan, ini bisa membuat pengujian / mengejek / mengetahui semua dependensi sepotong kode memiliki hal-hal sedikit lebih mudah.
edhedges
1
Hanya ingin tahu, apa sebenarnya arti "$ state.current"? Saya tidak bisa melihat penjelasan yang jelas tentang API ui-router, bantuan apa pun akan dihargai, terima kasih!
user2499325
3
@ user2499325: $ state.current mengembalikan objek dengan semua data yang Anda miliki di status AndaPenyedia: `` `{url:" / place /: placeId ", controller:" NewPlaceController ", controllerAs:" placeVM ", templateUrl:" places /new.place/new.place.details.html ", name:" index.places.placeDetails "}` ``
Xavier Haniquaut
1
Anda dapat mengganti {} dengan $ stateParams jika Anda sudah memiliki parameter yang dimuat seperti: $ state.go ($ state.current, $ stateParams, {reload: true});
tsuz
154

Solusi ini bekerja di AngularJS V.1.2.2:

$state.transitionTo($state.current, $stateParams, {
    reload: true,
    inherit: false,
    notify: true
});
Holland Risley
sumber
8
Di mana Anda akan menambahkan ini sehingga tidak menyebabkan loop tak terbatas?
Pathsofdesign
5
Apakah ini akan menyelesaikan kembali resolveitem - item negara?
TheSharpieOne
7
Juga, Anda tidak perlu menyuntikkan $ stateParams jika Anda mengubah panggilan itu ke $ state.params
Jeff Ancel
4
Bekerja jauh lebih baik daripada jawaban dengan suara tertinggi saat ini, sebenarnya memuat ulang halaman. Jika Anda memiliki masalah loop tak terbatas, reload Anda mungkin di tempat yang salah. Saya hanya menggunakannya pada klik tombol
Dan
2
Agak terlambat untuk @ManojG tetapi Anda akan meletakkan kode ini di mana pun Anda perlu memaksanya memuat ulang - mungkin dalam fungsi arahan ng-klik atau acara lainnya. Seharusnya tidak dilakukan pada setiap halaman memuat untuk alasan yang jelas (infinite loop)
sricks
68

Itu akan menjadi solusi terakhir. (terinspirasi oleh pos @ Hollan_Risley)

'use strict';

angular.module('app')

.config(function($provide) {
    $provide.decorator('$state', function($delegate, $stateParams) {
        $delegate.forceReload = function() {
            return $delegate.go($delegate.current, $stateParams, {
                reload: true,
                inherit: false,
                notify: true
            });
        };
        return $delegate;
    });
});

Sekarang, kapan pun Anda perlu memuat ulang, cukup hubungi:

$state.forceReload();
MK
sumber
6
inifinit loop of death
CS
6
Kedengarannya seperti Anda memiliki pencegat di suatu tempat yang dipicu. Saya telah menguji solusi ini beberapa kali dan berfungsi dengan baik.
MK
2
@ MK Terima kasih atas catatan itu. Ini mengarahkan saya ke solusi masalah saya sendiri yang berbeda. Saya telah menghabiskan waktu berjam-jam untuk mencari tahu mengapa permintaan saya menjadi dua kali lipat, kemudian tiga kali lipat dll dan itu semua karena pencegat ( github.com/witoldsz/angular-http-auth ).
Maciej Gurban
57

untuk kerangka ionik

$state.transitionTo($state.current, $state.$current.params, { reload: true, inherit: true, notify: true });//reload

$stateProvider.
  state('home', {
    url: '/',
    cache: false, //required

https://github.com/angular-ui/ui-router/issues/582

RouR
sumber
Bekerja dengan baik untuk saya di mana $state.gogagal mengalihkan ke keadaan baru. Terima kasih @RRR. Menyelamatkan hariku.
Guillaume Wuip
Saya pikir ganti $ state.go dengan $ state.transitionTo. Jadi di mana pun Anda menelepon $ state.go, ganti saja. Itu bisa terlihat seperti $ state.transitionTo ('nama-tab', {key: value}, {reload: true, inherit: true, notify: true}
Bill Pope
2
cache: false melakukan trik .. tapi seberapa besar pengaruhnya terhadap kinerja?
FrEaKmAn
ubah $ state.go dengan $ state.transitionTo untuk mengubah status dan memuat ulang @ManojG
Gery
Apakah saya harus memasukkan beberapa perpustakaan baru untuk digunakan $state? Saya menjalankan ionic 1.4.0, angular 1.5.3
josinalvo
45

Mungkin pendekatan yang lebih bersih adalah sebagai berikut:

<a data-ui-sref="directory.organisations.details" data-ui-sref-opts="{reload: true}">Details State</a>

Kami dapat memuat ulang negara hanya dari HTML.

Vaibhav Pachauri
sumber
7
Anda juga dapat menggunakan ui-sref-opts = "{reload: 'child.state'}" untuk menghindari memuat ulang seluruh halaman, di mana 'child.state' adalah string yang mewakili keadaan aktual Anda.
Michael Fulton
21

@Holland Risley jawaban sekarang tersedia sebagai api di ui-router terbaru.

$state.reload();

Metode yang memaksa memuat ulang kondisi saat ini. Semua resolusi diselesaikan kembali, pengendali diaktifkan kembali, dan acara kembali.

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

Muthukannan Kanniappan
sumber
16
$state.go($state.current, $stateParams, {reload: true, inherit: false});
Weston Ganger
sumber
13
$scope.reloadstat = function () { $state.go($state.current, {}, {reload: true}); };
pengguna7961355
sumber
7

jika Anda ingin memuat ulang seluruh halaman Anda, seperti tampaknya, cukup masukkan $ window ke controller Anda dan kemudian panggil

$window.location.href = '/';

tetapi jika Anda hanya ingin memuat ulang tampilan Anda saat ini, menyuntikkan $ scope, $ state dan $ stateParams (yang terakhir untuk berjaga-jaga jika Anda perlu memiliki beberapa perubahan parameter dalam reload yang akan datang ini, seperti nomor halaman Anda), kemudian panggil ini dalam metode pengontrol:

$stateParams.page = 1;
$state.reload();

AngularJS v1.3.15 angular-ui-router v0.2.15

Marco Santana
sumber
6

Solusi konyol yang selalu berhasil.

$state.go("otherState").then(function(){
     $state.go("wantedState")
});
Fanchi
sumber
3

Untuk v1.2.26 sudut, tidak ada yang bekerja di atas. Klik-ng yang memanggil metode di atas harus diklik dua kali untuk membuat status reload.

Jadi saya akhirnya meniru 2 klik menggunakan $ timeout.

$provide.decorator('$state',
        ["$delegate", "$stateParams", '$timeout', function ($delegate, $stateParams, $timeout) {
            $delegate.forceReload = function () {
                var reload = function () {
                    $delegate.transitionTo($delegate.current, angular.copy($stateParams), {
                        reload: true,
                        inherit: true,
                        notify: true
                    })
                };
                reload();
                $timeout(reload, 100);
            };
            return $delegate;
        }]);
thanos panousis
sumber
Navigation.reload () membutuhkan dua klik dengan Angular 1.3.0-rc0, tetapi transisiTo () berfungsi dengan baik. Mungkin mencoba memutakhirkan jika Anda memiliki masalah ini
sricks
3

Semuanya gagal untuk saya. Satu-satunya hal yang berhasil ... adalah menambahkan cache-view = "false" ke dalam tampilan yang ingin saya muat ulang saat melihatnya.

dari masalah ini https://github.com/angular-ui/ui-router/issues/582

Hans
sumber
3
Anda harus menambahkan bahwa ini untuk ion
Ladmerc
3

Tidak yakin mengapa tak satu pun dari ini tampaknya bekerja untuk saya; salah satu yang akhirnya melakukannya adalah:

$state.reload($state.current.name);

Ini dengan Angular 1.4.0

BarrySW19
sumber
2

Saya memiliki beberapa tampilan bersarang dan tujuannya adalah memuat ulang hanya satu dengan konten. Saya mencoba berbagai pendekatan tetapi satu-satunya hal yang berhasil bagi saya adalah:

//to reload
$stateParams.reload = !$stateParams.reload; //flip value of reload param
$state.go($state.current, $stateParams);

//state config
$stateProvider
  .state('app.dashboard', {
    url: '/',
    templateUrl: 'app/components/dashboard/dashboard.tmpl.html',
    controller: 'DashboardController',
    controllerAs: 'vm',
    params: {reload: false} //add reload param to a view you want to reload
  });

Dalam hal ini hanya tampilan yang diperlukan akan dimuat ulang dan caching akan tetap berfungsi.

Dmitriy Nevzorov
sumber
memuat ulang benar atau salah, Anda disebutkan sebagai salah. false akan memuat ulang konten dengan perubahan terbaru?
deadend
2

Saya tahu ada banyak jawaban tetapi cara terbaik yang saya temukan untuk melakukan ini tanpa menyebabkan penyegaran satu halaman penuh adalah dengan membuat parameter dummy pada rute yang ingin saya segarkan dan kemudian ketika saya memanggil rute yang saya lewati, nomor acak ke paramter dummy.

            .state("coverage.check.response", {
                params: { coverageResponse: null, coverageResponseId: 0, updater: 1 },
                views: {
                    "coverageResponse": {
                        templateUrl: "/Scripts/app/coverage/templates/coverageResponse.html",
                        controller: "coverageResponseController",
                        controllerAs: "vm"
                    }
                }
            })

dan kemudian panggilan ke rute itu

$state.go("coverage.check.response", { coverageResponse: coverage, updater: Math.floor(Math.random() * 100000) + 1 });

Bekerja seperti pesona dan menangani tekad.

ewahner
sumber
2

Anda dapat menggunakan @Rohan answer https://stackoverflow.com/a/23609343/3297761

Tetapi jika Anda ingin membuat setiap pengontrol reaload setelah perubahan tampilan yang dapat Anda gunakan

myApp.config(function($ionicConfigProvider) { $ionicConfigProvider.views.maxCache(0); ... }
EduLopez
sumber
2

Jika Anda menggunakan ionic v1, solusi di atas tidak akan berfungsi karena ionic telah mengaktifkan cache templat sebagai bagian dari $ ionicConfigProvider.

Mengatasi hal itu agak sedikit meretas - Anda harus mengatur cache ke 0 di file ionic.angular.js:

$ionicConfigProvider.views.maxCache(0);
Maksood
sumber
1

Saya punya masalah ini merusak kepala saya, rute saya dibaca dari file JSON dan kemudian dimasukkan ke dalam arahan. Saya bisa mengklik negara ui tapi saya tidak bisa memuat ulang halaman. Jadi seorang kolega saya menunjukkan kepada saya trik kecil yang bagus untuk itu.

  1. Dapatkan Data Anda
  2. Di aplikasi Anda, konfigurasi membuat status pemuatan
  3. Simpan status yang ingin Anda tuju di rootscope.
  4. Setel lokasi Anda ke "/ memuat" di app.run Anda
  5. Di controller memuat menyelesaikan janji routing dan kemudian mengatur lokasi ke target yang Anda inginkan.

Ini berhasil untuk saya.

Semoga ini bisa membantu

Evan Burbidge
sumber