วิธีโหลดสถานะปัจจุบันใหม่ได้อย่างไร


333

ฉันใช้ Angular UI Router และต้องการโหลดสถานะปัจจุบันอีกครั้งและรีเฟรชข้อมูลทั้งหมด / เรียกใช้งานคอนโทรลเลอร์อีกครั้งสำหรับสถานะปัจจุบันและเป็นพาเรนต์

ฉันมี 3 ระดับรัฐ: directory.organisations.details

directory.organisationsมีตารางพร้อมรายการองค์กร คลิกที่รายการในตารางโหลดdirectory.organisations.detailsกับ $ StateParams ผ่าน ID ของรายการ ดังนั้นในสถานะรายละเอียดฉันโหลดรายละเอียดสำหรับรายการนี้แก้ไขจากนั้นบันทึกข้อมูล ทั้งหมดก็ดี

ตอนนี้ฉันต้องโหลดสถานะนี้ใหม่และรีเฟรชข้อมูลทั้งหมด

ฉันเหนื่อย:

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

ซึ่งไปสู่สถานะผู้ปกครอง แต่ไม่โหลดตัวควบคุมอีกครั้งฉันเดาว่าเนื่องจากเส้นทางไม่เปลี่ยนแปลง เป็นการดีที่ฉันแค่อยากอยู่ในdirectory.organisations.detailsและรีเฟรชข้อมูลทั้งหมดในพาเรนต์ด้วย

ฉันได้ลองด้วย:

$state.reload()

ฉันเห็นสิ่งนี้ใน API WIKI สำหรับ $ state.reload "(ข้อผิดพลาดกับตัวควบคุมคืนค่าตอนนี้กำลังแก้ไขในไม่ช้า)"

ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม?


7
ฉันได้แก้ไขสิ่งนี้ดังนี้: $ state.transitionTo ($ state.current, $ stateParams, {reload: true, สืบทอด: false แจ้งเตือน: true});
Holland Risley

1
จะเพิ่มรหัสนี้ได้ที่ไหน
Manoj G

ดังนั้นข้อผิดพลาดได้รับการแก้ไขในขณะนี้? github.com/angular-ui/ui-router/wiki/…
jchnxu

ควร$state.transitionTo($state.current, $stateParams, {reload:true, inherit:false})เพิ่มรหัสไว้ที่ใด การมีปัญหาเดียวกันกับการโหลดซ้ำสถานะของฉันกำลังสูญเสียข้อมูลทั้งหมด
Evan Burbidge

คำตอบ:


565

ฉันพบสิ่งนี้เป็นวิธีการทำงานที่สั้นที่สุดในการรีเฟรชด้วย ui-router:

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

อัปเดตสำหรับเวอร์ชันที่ใหม่กว่า:

$state.reload();

ซึ่งเป็นนามแฝงสำหรับ:

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

เอกสารประกอบ: https://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state#methods_reload


21
น่าจะเป็นที่น่าสังเกตว่าไม่มีของเหล่านี้จริงโหลดหน้าเช่นกัน หากคุณต้องการโหลดรัฐและหน้าใหม่ฉันไม่มีui-routerวิธีคิด window.location.reload(true)Do
SimplGy

15
@SimpleAsCouldBe $window.location.reload();ถ้าคุณอยากจะเป็นอีกมุมเกี่ยวกับเรื่องที่คุณสามารถทำได้ แม้ว่ามันจะดูเกินเลยไปนิดหน่อย แต่มันอาจทำให้การทดสอบ / การเยาะเย้ย / การรู้ว่าการพึ่งพาทั้งหมดเป็นส่วนหนึ่งของรหัสทำให้สิ่งต่าง ๆ ง่ายขึ้นเล็กน้อย
edhedges

1
แค่อยากรู้อยากเห็น "$ state.current" หมายถึงอะไร? ฉันไม่เห็นคำอธิบายที่ชัดเจนเกี่ยวกับ API ของ ui-router ความช่วยเหลือใด ๆ จะได้รับการชื่นชมขอบคุณ!
user2499325

3
@ user2499325: $ state.current ส่งคืนวัตถุที่มีข้อมูลทั้งหมดที่คุณมีในรัฐ stateProvider: `` {url: "/ place /: placeId", คอนโทรลเลอร์: "NewPlaceController", controllerAs: "placeVM", templateUrl: "places /new.place/new.place.details.html ", ชื่อ:" index.places.placeDetails "}` ``
Xavier Haniquaut

1
คุณสามารถแทนที่ {} ด้วย $ stateParams หากคุณมีพารามิเตอร์ที่โหลดเช่น: $ state.go ($ state.current, $ stateParams, {reload: true});
tsuz

154

โซลูชันนี้ทำงานใน AngularJS V.1.2.2:

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

8
คุณจะเพิ่มสิ่งนี้ไว้ที่ไหนเพื่อไม่ให้เกิดการวนซ้ำไม่สิ้นสุด
Pathsofdesign

5
สิ่งนี้จะแก้ไขresolveรายการของรัฐอีกครั้งหรือไม่
TheSharpieOne

7
นอกจากนี้คุณไม่ต้องฉีด $ stateParams ถ้าคุณเปลี่ยนการโทรไปที่ $ state.params
Jeff Ancel

4
ทำงานได้ดีกว่าคำตอบที่ได้รับการโหวตสูงสุดในปัจจุบันโหลดหน้านี้ซ้ำ หากคุณมีปัญหาวงวนไม่สิ้นสุดการโหลดซ้ำของคุณอาจผิดที่ ฉันแค่ใช้มันในการคลิกปุ่ม
Dan

2
สายเกินไปสำหรับ @ManojG แต่คุณจะวางรหัสนี้ทุกที่ที่คุณต้องการบังคับให้โหลดซ้ำ - อาจอยู่ในฟังก์ชั่น directive ng-click หรือเหตุการณ์อื่น ๆ ไม่ควรทำทุกครั้งที่โหลดหน้าเว็บด้วยเหตุผลที่ชัดเจน (วนซ้ำไม่สิ้นสุด)
sricks

68

นั่นจะเป็นทางออกสุดท้าย (แรงบันดาลใจจากโพสต์ของ @ 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;
    });
});

ตอนนี้เมื่อใดก็ตามที่คุณต้องการโหลดเพียงแค่โทร:

$state.forceReload();

6
inifinit loop of death
CS

6
ดูเหมือนว่าคุณมีตัวดักจับที่ไหนซักแห่งที่ถูกกระตุ้น ฉันได้ทดสอบวิธีนี้หลายครั้งและใช้งานได้ดี
MK

2
@MK ขอบคุณสำหรับบันทึกย่อนั้น มันนำพาฉันไปสู่ทางออกของปัญหาที่แตกต่างของฉัน ฉันใช้เวลาหลายชั่วโมงในการพยายามหาสาเหตุว่าทำไมคำขอของฉันถึงเพิ่มขึ้นเป็นสองเท่าจากนั้นเพิ่มขึ้นเป็นสามเท่าและเป็นเพราะ interceptor ( github.com/witoldsz/angular-http-auth )
Maciej Gurban

57

สำหรับกรอบไอออนิก

$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


ทำงานได้ดีสำหรับฉันที่$state.goไม่สามารถเปลี่ยนเส้นทางไปยังสถานะใหม่ ขอบคุณ @RouR บันทึกวันของฉัน
Guillaume Wuip

ฉันคิดว่าแทนที่ $ state.go ด้วย $ state.transitionTo ดังนั้นไม่ว่าคุณจะโทรไปที่ $ state.go เพียงแค่แทนที่ มันอาจดูเหมือน $ state.transitionTo ('tab-name', {key: value}, {reload: true, สืบทอด: จริงแจ้งเตือน: true}
Bill Pope

2
แคช: เคล็ดลับไม่หลอกลวง .. แต่มันมีผลต่อประสิทธิภาพมากแค่ไหน
FrEaKmAn

เปลี่ยน $ state.go ด้วย $ state.transitionTo เพื่อเปลี่ยนสถานะและโหลดใหม่ @ManojG
Gery

ฉันต้องรวมไลบรารีใหม่เพื่อใช้งาน$stateหรือไม่ ฉันกำลังใช้อิออนิค 1.4.0, เชิงมุม 1.5.3
josinalvo

45

น่าจะเป็นวิธีที่สะอาดกว่าดังต่อไปนี้:

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

เราสามารถโหลดสถานะได้จาก HTML เท่านั้น


7
คุณยังสามารถใช้ ui-sref-opts = "{reload: 'child.state'}" เพื่อหลีกเลี่ยงการโหลดซ้ำทั้งหน้าโดยที่ 'child.state' เป็นสตริงที่แสดงถึงสถานะที่แท้จริงของคุณ
Michael Fulton

21

คำตอบของ @Holland Risley มีให้บริการในฐานะ API ใน ui-router ล่าสุด

$state.reload();

วิธีการที่บังคับโหลดสถานะปัจจุบัน การแก้ไขทั้งหมดได้รับการแก้ไขอีกครั้งตัวควบคุมเริ่มต้นใหม่และเหตุการณ์เริ่มต้นใหม่

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




7

หากคุณต้องการโหลดหน้าเว็บทั้งหมดของคุณเหมือนที่เห็นเพียงแค่ฉีด $ window เข้าในคอนโทรลเลอร์ของคุณแล้วโทร

$window.location.href = '/';

แต่ถ้าคุณต้องการโหลดมุมมองปัจจุบันของคุณใหม่เพียงฉีด $ scope, $ state และ $ stateParams (อันหลังในกรณีที่คุณจำเป็นต้องเปลี่ยนพารามิเตอร์บางอย่างในการโหลดที่กำลังจะมาถึงนี้เช่นหมายเลขหน้าของคุณ) ให้เรียกสิ่งนี้ภายใน วิธีการควบคุม:

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

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


6

วิธีแก้ปัญหาโง่ที่ทำงานได้เสมอ

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

3

สำหรับเชิงมุม v1.2.26 ไม่มีการทำงานใด ๆ ข้างต้น ng-click ที่เรียกเมธอดด้านบนจะต้องทำการคลิกสองครั้งเพื่อทำการรีโหลดสถานะ

ดังนั้นฉันเลยสิ้นสุดการจำลอง 2 คลิกโดยใช้ $ 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;
        }]);

Navigation.reload () ต้องใช้การคลิกสองครั้งด้วย Angular 1.3.0-rc0 แต่ transitionTo () ทำงานได้ดี อาจลองอัปเกรดหากคุณมีปัญหานี้
sricks

3

ทุกอย่างล้มเหลวสำหรับฉัน สิ่งเดียวที่ทำงานได้ ... กำลังเพิ่ม cache-view = "false" ลงในมุมมองที่ฉันต้องการโหลดซ้ำเมื่อไปที่

จากปัญหานี้https://github.com/angular-ui/ui-router/issues/582


3
คุณควรเพิ่มว่านี่สำหรับอิออน
Ladmerc

3

ไม่แน่ใจว่าทำไมสิ่งเหล่านี้จึงไม่เหมาะกับฉัน สิ่งหนึ่งที่ในที่สุดมันก็ทำคือ:

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

นี่คือกับ 1.4.4 เชิงมุม


2

ฉันมีมุมมองซ้อนกันหลายครั้งและเป้าหมายคือโหลดซ้ำหนึ่งครั้งด้วยเนื้อหา ฉันลองใช้วิธีที่ต่างกัน แต่สิ่งเดียวที่ใช้ได้ผลสำหรับฉันคือ:

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

ในกรณีนี้เฉพาะมุมมองที่จำเป็นเท่านั้นที่จะถูกโหลดใหม่และการแคชจะยังคงทำงานได้


โหลดจริงหรือเท็จคุณพูดถึงว่าเป็นเท็จ false จะโหลดเนื้อหาใหม่ด้วยการเปลี่ยนแปลงล่าสุดหรือไม่
ปิดท้าย

2

ฉันรู้ว่ามีคำตอบมากมาย แต่วิธีที่ดีที่สุดที่ฉันพบว่าทำได้โดยไม่ทำให้การรีเฟรชหน้าเต็มคือการสร้างพารามิเตอร์จำลองบนเส้นทางที่ฉันต้องการรีเฟรชและเมื่อฉันโทรหาเส้นทางที่ฉันผ่านไป หมายเลขสุ่มไปยังพารามิเตอร์จำลอง

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

จากนั้นโทรไปยังเส้นทางนั้น

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

ทำงานเหมือนจับใจและจัดการการแก้ไข


2

คุณสามารถใช้ @Rohan answer https://stackoverflow.com/a/23609343/3297761

แต่ถ้าคุณต้องการให้ตัวควบคุมแต่ละตัวโหลดจริงหลังจากการเปลี่ยนแปลงมุมมองคุณสามารถใช้

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

2

หากคุณใช้ ionic v1 โซลูชันด้านบนจะไม่ทำงานเนื่องจาก ionic เปิดใช้งานการแคชเทมเพลตเป็นส่วนหนึ่งของ $ ionicConfigProvider

หลีกเลี่ยงการแฮ็กบิต - คุณต้องตั้งค่าแคชเป็น 0 ในไฟล์ ionic.angular.js:

$ionicConfigProvider.views.maxCache(0);

1

ฉันมีปัญหานี้มันทำลายหัวของฉันเส้นทางของฉันถูกอ่านจากไฟล์ JSON แล้วป้อนเข้าสู่คำสั่ง ฉันสามารถคลิกที่สถานะ ui ได้ แต่ไม่สามารถโหลดหน้าซ้ำได้ ดังนั้นเพื่อนร่วมงานของฉันแสดงให้ฉันเห็นเคล็ดลับเล็กน้อยสำหรับมัน

  1. รับข้อมูลของคุณ
  2. ในแอปกำหนดค่าของคุณสร้างสถานะการโหลด
  3. บันทึกสถานะที่คุณต้องการไปในสโคป
  4. ตั้งค่าตำแหน่งของคุณเป็น "/ loading" ใน app.run
  5. ในตัวควบคุมการโหลดแก้ไขสัญญาการกำหนดเส้นทางจากนั้นตั้งค่าสถานที่เป็นเป้าหมายที่คุณต้องการ

สิ่งนี้ใช้ได้สำหรับฉัน

หวังว่ามันจะช่วย

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.