วิธีโหลดซ้ำหรือแสดงผลทั้งหน้าใหม่โดยใช้ AngularJS


299

หลังจากเรนเดอร์ทั้งหน้าตามบริบทของผู้ใช้หลายคนและมี$httpการร้องขอหลายครั้งฉันต้องการให้ผู้ใช้สามารถสลับบริบทและแสดงทุกอย่างอีกครั้งอีกครั้ง (ส่ง$httpคำขอทั้งหมดฯลฯ ) หากฉันเพิ่งเปลี่ยนเส้นทางผู้ใช้ไปที่อื่นสิ่งต่าง ๆ ทำงานได้อย่างถูกต้อง:

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

หากฉันใช้$window.location.reload()ดังนั้นบาง$httpคำขอauth.impersonate(username)ที่กำลังรอการตอบกลับจะถูกยกเลิกดังนั้นฉันจึงไม่สามารถใช้งานได้ นอกจากนี้แฮ็ค$location.path($location.path())ก็ไม่ทำงานเช่นกัน (ไม่มีอะไรเกิดขึ้น)

มีวิธีการแสดงหน้าอีกครั้งโดยไม่ต้องออกคำขอทั้งหมดอีกครั้งด้วยตนเองหรือไม่


ดังที่ Alvaro Joao กล่าวไว้ด้านล่างคุณต้องใช้ angular-route.js เพื่อให้สิ่งนี้ใช้งานได้ bennadel.com/blog/…
Yvonne Aburrow

สำเนาซ้ำที่เป็นไปได้ของAngularJs: หน้าโหลด
Alena Kastsiukavets

คำตอบ:


404

สำหรับเรกคอร์ดเมื่อต้องการบังคับให้เชิงมุมอีกครั้งแสดงหน้าปัจจุบันคุณสามารถใช้:

$route.reload();

ตามเอกสารของ AngularJS :

ทำให้บริการ $ route ทำการโหลดเส้นทางปัจจุบันอีกครั้งแม้ว่า $ location จะไม่เปลี่ยนแปลง

ด้วยเหตุนี้ ngView จึงสร้างขอบเขตใหม่ทำให้คอนโทรลเลอร์มีเสถียรภาพ


6
ขอบคุณสำหรับความคิดเห็นด้วยเหตุผลบางอย่างที่ฉันดูเหมือนจะมีพฤติกรรมที่แตกต่างกันเล็กน้อยเมื่อฉันใช้$route.reload()เมื่อเทียบกับการรีเฟรชปกติ ตัวอย่างเช่นแท็บถูกตั้งค่าให้แสดงเริ่มต้นเมื่อรีเฟรช แต่เมื่อวิธีการโหลดซ้ำดูเหมือนว่าจะโหลดหน้าเว็บใหม่โดยไม่ตั้งค่าแท็บไม่แน่ใจว่าปัญหาคืออะไร
Doug Molineux

2
ตัวกรอง / บริการนี้ทำงานด้วยหรือไม่ รับสถานะถาวรที่ไม่พึงประสงค์ แก้ไข: ยังมี upvoted สำหรับการตอบคำถามอย่างถูกต้อง & สิ่งนี้มีประโยชน์มาก ขอบคุณ
ให้สิทธิ์

10
อย่าลืมฉีด$routeไปที่คอนโทรลเลอร์เพื่อให้ใช้งานได้
Neel

6
@alphapilgrim โมดูล ngRoute angular.js fileจะไม่มีอีกต่อไปเป็นส่วนหนึ่งของแกน หากคุณยังคงใช้งานต่อไป$routeProviderตอนนี้คุณจะต้องรวมangular-route.jsไว้ใน HTML ของคุณ:
Alvaro Joao

3
$ state.reload () ถ้าคุณใช้ stateProvider
Lalit Rao

314

$route.reload()จะกำหนดค่าเริ่มต้นให้กับคอนโทรลเลอร์ แต่ไม่ใช่เซอร์วิส หากคุณต้องการรีเซ็ตสถานะทั้งหมดของแอปพลิเคชันของคุณคุณสามารถใช้:

$window.location.reload();

นี่เป็นวิธี DOM มาตรฐานซึ่งคุณสามารถเข้าถึงการฉีดบริการ$ window

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

เชิงมุม 2

ดังกล่าวข้างต้นนำไปใช้กับเชิงมุม 1. ฉันไม่ได้ใช้เชิงมุม 2 ลักษณะเช่นบริการจะแตกต่างกันที่นั่นมีRouter, และLocation DOCUMENTฉันไม่ได้ทดสอบพฤติกรรมที่แตกต่างกัน


2
เป็นที่น่าสังเกตว่าเราไม่ควรเก็บสถานะไว้ในบริการต่อไปเพื่อให้บริการ "เริ่มใหม่"
andersonvom

19
ใครบอกว่า อยู่ที่ไหนควรเก็บข้อมูลที่แคช
danza

5
ฉันสะดุดข้อผิดพลาดมากมายเนื่องจากข้อมูลถูกเก็บไว้ในบริการทำให้พวกเขาเป็นรัฐมากกว่าไร้สัญชาติ นอกจากว่าเรากำลังพูดถึงบริการแคช (ในกรณีนี้จะมีอินเทอร์เฟซสำหรับล้างข้อมูล) ฉันจะเก็บข้อมูลไม่อยู่ในบริการและในคอนโทรลเลอร์ ตัวอย่างเช่นหนึ่งสามารถเก็บข้อมูลใน localStorage และใช้บริการเพื่อเข้าถึง นี่จะเป็นการเพิ่มบริการจากการเก็บข้อมูลโดยตรง
andersonvom

2
@danza ควรเก็บข้อมูลแคชไว้ที่ไหน ... โมเดลวัตถุหรือไม่ Howver Angular ทำงานที่ยอดเยี่ยมในการตั้งชื่อ MVCS ของพวกเขา ฉันเก็บออบเจ็กต์โมเดลแบบฉีดได้ผ่าน module.value API จากนั้น APIs ต่างๆที่ฉันกำหนดไว้ในบริการ ng ที่ปรับเปลี่ยนวัตถุโมเดลทำงานเหมือนคำสั่ง
jusopi

2
แน่นอนว่ามันจะใช้งานได้ แต่มันไม่ใช่วิธีปฏิบัติที่ดี ดูเอกสารประกอบเกี่ยวกับ $ windowเหตุผลในการใช้อธิบายไว้ในตอนต้น: ในขณะที่หน้าต่างพร้อมใช้งานทั่วโลกใน JavaScript จะทำให้เกิดปัญหาในการทดสอบได้เนื่องจากเป็นตัวแปรทั่วโลก ในเชิงมุมเราจะอ้างถึงมันเสมอผ่านบริการ $ window ดังนั้นมันอาจถูกลบล้างถูกลบหรือเยาะเย้ยสำหรับการทดสอบ
danza

38

สำหรับการโหลดหน้าใหม่สำหรับเส้นทางที่กำหนด: -

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

6
ไม่ทราบสาเหตุ แต่วิธี. reload () ดูเหมือนว่าไม่ทำงานที่นี่ มันไม่ได้คิดอะไรเลย
mircobabini

28

หากคุณกำลังใช้ui-router เชิงมุมนี่จะเป็นทางออกที่ดีที่สุด

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

ในโครงการ cli ของฉันหลังจากปรับใช้กับโฮสติ้งที่ใช้ร่วมกัน เมื่อฉันโหลดโครงการของฉันให้ 404 ข้อผิดพลาดในการแก้ไขปัญหานี้ได้ใช้ หากฉันเพิ่ม 'use hash' แสดงว่าใช้งานได้กับ '#' แต่ฉันไม่ต้องการสิ่งนี้มีวิธีแก้ไขหรือไม่
T. Shashwat

24

บางทีคุณอาจลืมเพิ่ม "$ route" เมื่อประกาศการขึ้นต่อกันของ Controller:

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

9

เพียงโหลดใหม่ทุกอย่างใช้ window.location.reload (); กับ angularjs

ตรวจสอบตัวอย่างการทำงาน

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

หากคุณต้องการรีเฟรชคอนโทรลเลอร์ในขณะที่รีเฟรชบริการใด ๆ ที่คุณใช้อยู่คุณสามารถใช้โซลูชันนี้:

  • ฉีด $ state

กล่าวคือ

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

นี้จะรีเฟรชตัวควบคุมและ HTML ได้เป็นอย่างดีคุณสามารถเรียกมันรีเฟรชหรือ Re-Render


2
นี่สำหรับเราเตอร์ UI ไม่ใช่สำหรับเชิงมุม
dgzornoza

6

ก่อนหน้า Angular 2 (AngularJs)

ผ่านเส้นทาง

$route.reload();

หากคุณต้องการโหลดแอปพลิเคชันใหม่ทั้งหมด

$window.location.reload();

เชิงมุม 2+

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

constructor(private location: Location) {}

ngOnInit() {  }

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

หรือ

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}

FYI - เชิงมุม 7: "คุณสมบัติ 'โหลดซ้ำ' ไม่มีอยู่ในประเภท 'ที่ตั้ง'"
ACEG

@ Cristina ขอบคุณข้อมูลของคุณ ฉันใช้สิ่งนี้ก่อนมุม 7
Thilina Sampath

5

ทางออกที่ง่ายที่สุดที่ฉันคิดคือ

เพิ่ม '/' ในเส้นทางที่ต้องการโหลดใหม่ทุกครั้งเมื่อกลับมา

เช่น:

แทนการดังต่อไปนี้

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

ใช้,

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

2
@PardeepJain สิ่งนี้ใช้ได้กับฉัน นั่นคือเหตุผลที่นี่เป็นคำตอบ คุณลงคะแนนโหวตคำตอบของฉัน?
diyoda_

1
ไม่ไม่เลยคำตอบของคุณไม่เลวร้ายนักสำหรับการลงคะแนน น่าอัศจรรย์ฉันไม่ได้ตอนนี้ทำไมไม่เหมือนกันสำหรับฉันใน angular2
Pardeep Jain

2
โซลูชั่นที่สมบูรณ์แบบ Thks!
simon

วิธีนี้ใช้ได้แม้ว่าเส้นทางดั้งเดิมของคุณคือรากของแอปพลิเคชัน - /: O เส้นทางของฉันตอนนี้มีลักษณะดังนี้://
MadPhysicist

ใน Angular 6 จะทำงานหลังจากใช้ # เดียวกันสามารถใช้กับ Angular2 ได้เช่นกัน คิดอย่างนั้น
T. Shashwat

5

ลองใช้วิธีใดวิธีหนึ่งต่อไปนี้:

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

4

ฉันได้รับรหัสการทำงานนี้เพื่อลบแคชและโหลดหน้าซ้ำ

ดู

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

ตัวควบคุม

Injectors: $ scope, $ state, $ stateParams, $ templateCache

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

3

ใช้รหัสต่อไปนี้โดยไม่มีการแจ้งเตือนการโหลดซ้ำกับผู้ใช้ มันจะแสดงหน้า

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

-8

ฉันต่อสู้อย่างหนักกับปัญหานี้มาหลายเดือนแล้วและทางออกเดียวที่ได้ผลสำหรับฉันก็คือ:

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

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