एंगुलरज: रीलोड पेज


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

मैं पृष्ठ को फिर से लोड करना चाहता हूं। मैं यह कैसे कर सकता हूँ?

जवाबों:


265

आप सेवा की 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- राउटर):

जैसा कि JamesEddyEdwards और Dunc ने अपने उत्तरों में उल्लेख किया है, यदि आप कोणीय-यूआई / यूआई-राउटर का उपयोग कर रहे हैं, तो आप वर्तमान राज्य / मार्ग को फिर से लोड करने के लिए निम्न विधि का उपयोग कर सकते हैं। $stateइसके बजाय बस इंजेक्ट करें $routeऔर फिर आपके पास:

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

2
यदि आप पुनः लोड करने के लिए बेताब हैं तो यह एक अच्छा जवाब है।
15

सभी लिंक पर कार्रवाई जोड़ने के बजाय मैं इस व्यवहार को विश्व स्तर पर कैसे बदल सकता हूं
OMGPOP

@OMGPOP वास्तव में आप सभी लिंक के लिए विश्व स्तर पर क्या मतलब है?
अलेक्जेंड्रिन रस

मेरा मतलब है, सभी लिंक के लिए आपको यह करने की आवश्यकता है। क्या सभी लिंक के लिए एक बार कॉन्फ़िगर करना संभव है?
OMGPOP

@ एलेक्ज़ेंड्रिनस ने मुझे निम्नलिखित [$ rootScope: infdig] 10 $ डाइजेस्ट () पुनरावृत्तियों तक पहुँचा दिया। निरस्त किया जा रहा!
१०:१० बजे अल्फपिलग्रिम

52

windowऑब्जेक्ट को आसान परीक्षण और मॉकिंग के$window लिए सेवा के माध्यम से उपलब्ध कराया जाता है , आप कुछ इस तरह से जा सकते हैं:

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

तथा :

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

एक साइड नोट के रूप में, मुझे नहीं लगता कि $ path.reload () वास्तव में पृष्ठ को पुनः लोड करता है, लेकिन केवल मार्ग


2
मैं $windowइसके बजाय का उपयोग करने की सलाह देता हूं window
जेरोइन

आपके योगदान के लिए धन्यवाद। क्या आप हमें समझाएंगे कि क्यों?
फ्लोरियन एफ।

1
हाँ क्षमा करें। यह डॉक्स द्वारा सबसे अच्छा समझाया गया है$window , मुख्य रूप से यह इसलिए है क्योंकि reloadPageइसका उपयोग करने पर यह (बेहतर) परीक्षण योग्य होगा $window
जीरो

19
 location.reload(); 

उसने चाल चली।

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

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

मार्गों या कुछ भी नहीं की जरूरत है बस सादे पुराने जेएस


2
सादगी से प्यार करो!
शॉन डी वेट

14

एलेक्ज़ेंड्रिन के जवाब के समान, लेकिन $ मार्ग के बजाय $ राज्य का उपयोग करना:

(जिमदेव के एसओ के जवाब से यहां ।)

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

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


5

अनंत लूप से बचने के लिए मेरा समाधान एक और राज्य बनाना था जिसने पुनर्निर्देशन किया है:

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

2

कोणीय 2+

मैंने इसे Angular 2+ की खोज करते हुए पाया, इसलिए यहाँ इस प्रकार है:

$window.location.reload();

1
यह कोणीय के लिए विशिष्ट नहीं है, वैसे, इसका जावास्क्रिप्ट तरीका।
नितिन जाधव

1

यह बस उपयोग करने के लिए पर्याप्त है $route.reload()(अपने नियंत्रक में $ मार्ग को इंजेक्ट करना न भूलें), लेकिन आपके उदाहरण से आप "एनजी-एचआरईआर" के बजाय "हीर" का उपयोग कर सकते हैं:

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

उपयोगकर्ता को {{}} टैग की सामग्री को प्रतिस्थापित करने से पहले उनके द्वारा क्लिक किए गए अमान्य लिंक से उपयोगकर्ता को बचाने के लिए आपको केवल एनजी-एचआरईआर का उपयोग करने की आवश्यकता है।


$ मार्ग ng.route.IRouteService का हिस्सा है ??
पटाखा

1

कोणीय 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'
     });
}])

और यह मेरे लिए ठीक काम करता है। यह पूरे पृष्ठ को ताज़ा नहीं करता है, लेकिन केवल वर्तमान नियंत्रक और टेम्पलेट को फिर से लोड करने का कारण बनता है। मुझे पता है कि यह थोड़ा हैकी है, लेकिन यही एकमात्र समाधान था जो मैंने पाया।


एक आसान तरीका हो सकता है var reload = $location.url(); $location.url(''); $timeout(function() { $location.url(reload); });; यादृच्छिक मार्गों को बनाने की आवश्यकता नहीं है। लेकिन यह देखना दिलचस्प होगा कि कौन सा कोड आपके लिए पुनर्मूल्यांकन नहीं करता है। ऐसा लगता है कि redirectToएस और resolveफ़ंक्शंस एक सामान्य पर फिर से निष्पादित होते हैं$route.reload() (कंसोल को देखें)।
हाशबोर्न

1
<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 में पास की गई आईडी वही है जो एंकर को क्लिक करके फंक्शन से आ रही है, तो बस पुनः लोड करें, अन्यथा अनुरोधित मार्ग को फोलो करें।

कृपया इस उत्तर को बेहतर बनाने में मेरी मदद करें, यदि यह मदद करता है। किसी भी, सुझाव का स्वागत है।


मुझे यह पता लगाने में एक महीने का समय लगा कि पेज
sam

0

यह सादे जावास्क्रिप्ट में विंडो ऑब्जेक्ट के रीलोड () विधि को कॉल करके किया जा सकता है

window.location.reload();


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.