AngularJs: โหลดหน้าใหม่

<a ng-href="#" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>

ฉันต้องการโหลดหน้านี้ซ้ำ ฉันจะทำเช่นนี้ได้อย่างไร?

คุณสามารถใช้reloadวิธีการของ$routeบริการ ฉีด$routeเข้าไปในคอนโทรลเลอร์ของคุณแล้วสร้างวิธีการreloadRouteใน$scopeไฟล์.

$scope.reloadRoute = function() {
   $route.reload();
}

จากนั้นคุณสามารถใช้งานได้ในลิงค์ดังนี้:

<a ng-click="reloadRoute()" class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

วิธีนี้จะทำให้เส้นทางปัจจุบันโหลดซ้ำ อย่างไรก็ตามหากคุณต้องการทำการรีเฟรชแบบเต็มคุณสามารถฉีด$windowและใช้สิ่งนั้น:

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

แก้ไขภายหลัง (ui-router):

ตามที่ JamesEddyEdwards และ Dunc กล่าวไว้ในคำตอบหากคุณใช้angular-ui / ui-routerคุณสามารถใช้วิธีการต่อไปนี้เพื่อโหลดสถานะ / เส้นทางปัจจุบันใหม่ เพียงฉีด$stateแทน$routeแล้วคุณจะมี:

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

windowมีให้บริการผ่านทาง$windowบริการเพื่อการทดสอบและการเยาะเย้ยที่ง่ายขึ้นคุณสามารถทำสิ่งต่างๆเช่น:

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

และ:

<a ng-click="reloadPage"  class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

ตามหมายเหตุด้านข้างฉันไม่คิดว่า $ route.reload () จะโหลดหน้าเว็บซ้ำแต่เฉพาะเส้นทางเท่านั้น

 location.reload(); 

เคล็ดลับไม่

<a ng-click="reload()">

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

ไม่จำเป็นต้องมีเส้นทางหรืออะไรแค่ js เก่า ๆ ธรรมดา ๆ

คล้ายกับคำตอบของ Alexandrin แต่ใช้ $ state มากกว่า $ route:

(จากคำตอบ SO ของ JimTheDev ที่นี่ )

$scope.reloadState = function() {
   $state.go($state.current, {}, {reload: true});
}

<a ng-click="reloadState()" ... 

หากใช้ui-routerขั้นสูงของ Angulars ซึ่งฉันขอแนะนำอย่างแน่นอนตอนนี้คุณสามารถใช้:

$state.reload();

ซึ่งโดยพื้นฐานแล้วจะทำเช่นเดียวกับคำตอบของ Dunc

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

$stateProvider.state('app.admin.main', {
    url: '/admin/main',
    authenticate: 'admin',
    controller: ($state, $window) => {
      $state.go('app.admin.overview').then(() => {
        $window.location.reload();
      });
    }
  });

เชิงมุม 2+

ฉันพบสิ่งนี้ขณะค้นหา Angular 2+ ดังนั้นนี่คือวิธี:

$window.location.reload();

ง่ายพอที่จะใช้$route.reload()(อย่าลืมฉีด $ route เข้าไปในคอนโทรลเลอร์ของคุณ) แต่จากตัวอย่างของคุณคุณสามารถใช้ "href" แทน "ng-href":

<a href=""  class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

คุณจำเป็นต้องใช้ ng-href เพื่อปกป้องผู้ใช้จากลิงก์ที่ไม่ถูกต้องซึ่งเกิดจากการคลิกก่อนที่ Angular จะแทนที่เนื้อหาของแท็ก {{}}

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

$scope.someFuncName = function () {
    //go to another route
    $location.path('/another-route');
};

และในการกำหนดค่าโมดูลให้เพิ่มอีกwhen:

.config(['$routeProvider', function($routeProvider) {
     $routeProvider.when('/first-page', {
         templateUrl: '/first-template',
         controller: 'SomeCtrl'
     }).when('/another-route', {//this is the new "when"
         redirectTo: '/first-page'
     });
}])

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

<a title="Pending Employee Approvals" href="" ng-click="viewPendingApprovals(1)">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <span class="button_badge">{{pendingEmployeeApprovalCount}}</span>
                </a>

และในตัวควบคุม

 $scope.viewPendingApprovals = function(type) {
                if (window.location.hash.substring(window.location.hash.lastIndexOf('/') + 1, window.location.hash.length) == type) {
                    location.reload();
                } else {
                    $state.go("home.pendingApproval", { id: sessionStorage.typeToLoad });
                }
            };

และในไฟล์เส้นทาง

.state('home.pendingApproval', {
        url: '/pendingApproval/:id',
        templateUrl: 'app/components/approvals/pendingApprovalList.html',
        controller: 'pendingApprovalListController'
    })

ดังนั้นหากรหัสที่ส่งผ่านใน url เหมือนกับสิ่งที่มาจากฟังก์ชันที่เรียกโดยการคลิกจุดยึดจากนั้นก็โหลดซ้ำไม่เช่นนั้นจะตามเส้นทางที่ร้องขอ

โปรดช่วยฉันปรับปรุงคำตอบนี้หากเป็นประโยชน์ ข้อเสนอแนะใด ๆ ยินดีต้อนรับ

สามารถทำได้โดยการเรียกใช้เมธอด reload () ของอ็อบเจ็กต์หน้าต่างใน JavaScript ธรรมดา

window.location.reload();

ฉันขอแนะนำให้ดูหน้านี้ ข้อเสนอแนะอย่างเป็นทางการ

https://docs.angularjs.org/guide/$location

สามารถทำได้โดยเรียกใช้เมธอด reload () ใน JavaScript

location.reload();