অ্যাঙ্গুলারজেএস ব্যবহার করে কীভাবে পুরো পৃষ্ঠাটি পুনরায় লোড বা পুনরায় রেন্ডার করতে হয়


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())কাজ করে না (কিছুই ঘটে না)।

ম্যানুয়ালি পুনরায় সমস্ত অনুরোধগুলি ইস্যু না করেই কী পুনরায় রেন্ডার করার অন্য কোনও উপায় আছে?


আলভারো জোয়াও যেমন নীচে বলেছেন, এটি কাজ করার জন্য আপনাকে কৌণিক-রুট.জেএস ব্যবহার করতে হবে। bennadel.com/blog/…
Yvonne Aburrow

উত্তর:


404

রেকর্ডের জন্য, বর্তমান পৃষ্ঠাকে পুনরায় রেন্ডার করতে কৌনিক জোর করতে, আপনি ব্যবহার করতে পারেন:

$route.reload();

অ্যাঙ্গুলারজেএস ডকুমেন্টেশন অনুসারে :

কারণগুলি $ রুট পরিষেবাটি বর্তমান রুটটি পুনরায় লোড করতে $ অবস্থান পরিবর্তিত না হলেও।

এর ফলস্বরূপ, এনজিভিউ নতুন সুযোগ তৈরি করে, নিয়ামককে পুনরায় জোর দেয়।


6
মন্তব্যের জন্য ধন্যবাদ, কিছু কারণের জন্য যখন আমি $route.reload()একটি সাধারণ রিফ্রেশের তুলনায় ব্যবহার করি তখন কিছুটা আলাদা আচরণ হয় বলে মনে হয় । উদাহরণস্বরূপ, একটি ট্যাব শুরুতে রিফ্রেশে দেখানোর জন্য সেট করা থাকে, তবে যখন পুনরায় লোড পদ্ধতিটি ট্যাবটি সেট না করেই পৃষ্ঠাটি পুনরায় লোড করে মনে হয়, সমস্যাটি কী তা নিশ্চিত হন না।
ডগ মোলিনাক্স

2
এটি কি ফিল্টারগুলি / পরিষেবাগুলি চালায়? অনাকাঙ্ক্ষিত অবিচ্ছিন্ন অবস্থা প্রাপ্তি। সম্পাদনা করুন: এখনও প্রশ্নের সঠিক উত্তর দেওয়ার জন্য আপলোড করা হয়েছে এবং এটি অত্যন্ত সহায়ক। আপনাকে ধন্যবাদ
মঞ্জুরি দিন

10
$routeএটি কাজ করার জন্য নিয়ামককে ইনজেক্ট করতে ভুলবেন না।
নীল

6
@ আলফাপিলগ্রিম এনজিআরট মডিউলটি আর মূল অংশ নয় angular.js file। আপনি যদি ব্যবহার অব্যাহত $routeProviderangular-route.js
আলভারো জোয়াও

3
। state.reload () আপনি যদি রাজ্য সরবরাহকারী ব্যবহার করেন
ললিত রাও

314

$route.reload()কন্ট্রোলারগুলিকে পুনরায় চালু করতে হবে তবে পরিষেবাগুলি নয়। আপনি যদি নিজের অ্যাপ্লিকেশনটির পুরো রাজ্যটি পুনরায় সেট করতে চান তবে আপনি ব্যবহার করতে পারেন:

$window.location.reload();

এটি একটি স্ট্যান্ডার্ড ডিওএম পদ্ধতি যা আপনি উইন্ডো পরিষেবাটি ইনজেকশন অ্যাক্সেস করতে পারবেন ।

আপনি যদি সার্ভার থেকে পৃষ্ঠাটি পুনরায় লোড করার বিষয়ে নিশ্চিত হতে চান, উদাহরণস্বরূপ আপনি যখন জ্যাঙ্গো বা অন্য কোনও ওয়েব ফ্রেমওয়ার্ক ব্যবহার করছেন এবং আপনি যখন একটি নতুন সার্ভার সাইড রেন্ডার চান তখন ডক্সে বর্ণিত হিসাবে এটি trueপ্যারামিটার হিসাবে পাস করুন । যেহেতু এটির জন্য সার্ভারের সাথে ইন্টারঅ্যাকশন প্রয়োজন, এটি ধীর হবে তাই কেবল প্রয়োজনে এটি করুনreload

কৌণিক ঘ

উপরে আমি কৌণিক 2 ব্যবহার করছি না কৌণিক 1. প্রযোজ্য, সেবা মত দেখাচ্ছে বিভিন্ন হয়, আছে Router, Locationএবং DOCUMENT। আমি সেখানে বিভিন্ন আচরণের পরীক্ষা করিনি


2
এটি লক্ষণীয় যে পরিষেবাগুলি "পুনঃসূচনা" করার জন্য কোনও ব্যক্তিকে পরিষেবাগুলিতে স্টেট স্টোর করা উচিত নয়।
andersonvom

19
এটা কে বলেছে? ক্যাশেড ডেটা কোথায় রাখার কথা?
ডানজা

5
আমি পরিষেবাগুলিতে ডেটা সংরক্ষণের কারণে প্রচুর এবং প্রচুর বাগের উপর হোঁচট খেয়েছি, এগুলি রাষ্ট্রহীন না হয়ে রাষ্ট্রীয় করে তুলছি। আমরা যদি কোনও ক্যাচিং পরিষেবাদির কথা না বলি (তবে এই ক্ষেত্রে এটি ফ্লাশ করার জন্য একটি ইন্টারফেস থাকবে), আমি পরিষেবাগুলি এবং নিয়ন্ত্রণকারীদের মধ্যে ডেটা রাখি। উদাহরণস্বরূপ, কেউ লোকালস্টোরেজে ডেটা রাখতে পারে এবং এটি অ্যাক্সেস করার জন্য কোনও পরিষেবা ব্যবহার করতে পারে। এটি পরিষেবাটিতে সরাসরি ডেটা রাখা থেকে মুক্ত করে দেবে।
andersonvom

2
@ উদ্যানজা কোথায় ক্যাশেড ডেটা সংরক্ষণ করার কথা? ... একটি মডেল অবজেক্ট? হাওভার অ্যাঙ্গুলার তাদের এমভিসিএস উপাদানগুলির নামকরণের জন্য এক ভয়ানক কাজ করেছে। আমি মডিউল.ভালু এপিআইয়ের মাধ্যমে ইনজেকশনযোগ্য মডেল অবজেক্টগুলি রাখি। তারপরে আমি এনজি সার্ভিসে সংজ্ঞায়িত বিভিন্ন এপিআইগুলি মডেল অবজেক্টকে কমান্ডের মতো আরও বেশি পরিবর্তন করে।
Justopi

2
অবশ্যই, এটি কার্যকর হবে, তবে এটি ভাল অনুশীলন নয়। $ উইন্ডো সম্পর্কিত ডকুমেন্টেশন দেখুন , এটির ব্যবহারের কারণটি শুরুতে ব্যাখ্যা করা হয়েছে: উইন্ডোটি জাভাস্ক্রিপ্টে বিশ্বব্যাপী উপলব্ধ থাকলেও এটি পরীক্ষার সমস্যা তৈরি করে, কারণ এটি একটি বৈশ্বিক পরিবর্তনশীল। কৌণিক ক্ষেত্রে আমরা সর্বদা এটি $ উইন্ডো পরিষেবাটির মাধ্যমে উল্লেখ করি, তাই এটি পরীক্ষার জন্য ওভাররাইড, অপসারণ বা উপহাস হতে পারে
ডানজা

38

প্রদত্ত রুটের পথের জন্য পৃষ্ঠাটি পুনরায় লোড করার জন্য: -

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

6
কেন জানি না তবে .রেলোড () পদ্ধতিটি এখানে কাজ করছে না বলে মনে হচ্ছে। এটি কিছুই রিয়েলড করে না।
মিরকোবাবিনি

28

আপনি যদি কৌণিক ইউআই-রাউটার ব্যবহার করেন তবে এটি সেরা সমাধান হবে।

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

হোস্টিং ভাগ করে নেওয়ার পরে আমার ক্লাইপ প্রকল্পে। আমি যখন আমার প্রকল্পটি পুনরায় লোড করছি তখন এটি ব্যবহার করার জন্য এটির জন্য 404 প্রদানের ত্রুটি রয়েছে। যদি আমি 'হ্যাশ ব্যবহার' যোগ করি তবে এটি '#' দিয়ে কাজ করে তবে আমি এটি চাই না, সমাধান করার উপায় আছে কি?
টি। শাশ্বত

24

ঠিক আছে আপনি নিজের কন্ট্রোলারের নির্ভরতা ঘোষণার সময় আপনি "$ রুট" যুক্ত করতে ভুলে গেছেন:

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

9

কেবল সমস্ত কিছু পুনরায় লোড করার জন্য, উইন্ডো.লোকেশন.রেলোড () ব্যবহার করুন; আঙ্গুলের সাথে

কাজের উদাহরণ দেখুন

এইচটিএমএল

<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

আপনি যে কোনও পরিষেবা ব্যবহার করছেন তা রিফ্রেশ করার সময় আপনি যদি নিয়ামককে রিফ্রেশ করতে চান তবে আপনি এই সমাধানটি ব্যবহার করতে পারেন:

  • ইনজেকশন $ রাষ্ট্র

অর্থাত

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

এটি নিয়ামক এবং এইচটিএমএলকে রিফ্রেশ করবে পাশাপাশি আপনি এটিকে রিফ্রেশ বা পুনরায়-রেন্ডার বলতে পারেন


2
এটি কৌনিকের জন্য নয় ইউআই রাউটারের জন্য।
dgzornoza

6

কৌনিক 2 এর আগে (কৌণিক জে)

রুট দিয়ে

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

এফওয়াইআই - কৌণিক 7: "সম্পত্তি 'পুনরায় লোড' টাইপ 'অবস্থান' তে বিদ্যমান নেই"।
এসিইজি

@ ক্রিস্টিনা আপনার তথ্য ধন্যবাদ। আমি এটি কৌনিক 7 এর আগে ব্যবহার করি
থিলিনা সম্পথ

5

আমার কাছে পাওয়া সবচেয়ে সহজ সমাধানটি হ'ল,

ফিরে আসার সময় প্রতিবার পুনরায় লোড করতে চাইলে সেই রুটে '/' যুক্ত করুন।

উদাহরণ:

পরিবর্তে নিম্নলিখিত

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

ব্যবহার,

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

2
@ পারদীপজাইন এটি আমার পক্ষে কাজ করেছিল worked এই কারণেই এটি একটি উত্তর। তুমি কি আমার উত্তরকে কমিয়ে দিয়েছ?
diyoda_

1
না মোটেও নয়, আপনার উত্তরটি ডাউনওয়োট করার পক্ষে খুব খারাপ নয়। আশ্চর্যজনক আমি এখন কেন একই কৌনিক 2 এ আমার জন্য কাজ করে না।
পারদীপ জৈন

2
নিখুঁত সমাধান. Thks!
সাইমন

আপনার আসল পথটি যদি অ্যাপ্লিকেশনের মূল হয় ///
তবেও

কৌণিক 6 এ এটি # টি ব্যবহারের পরে কাজ করে যা কৌনিক 2 এর জন্যও ব্যবহার করা যেতে পারে। তাই ভাবেন
টি শাশ্বত

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>

নিয়ামক

ইনজেক্টর: $ সুযোগ, $ রাষ্ট্র, $ রাজ্যপ্যারামস, $ টেমপ্লেট ক্যাশে

       $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()ওপি বিশেষত তার ক্ষেত্রে যথাযথভাবে কাজ করে না বলে উল্লেখ করার চেয়ে এটি খুব কমই আলাদা ।
সমস্ত কর্মী
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.