AngularJS নিয়ন্ত্রণকারীদের মধ্যে ডেটা ভাগ করুন

Question

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

এইচটিএমএল

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="FirstName"><!-- Input entered here -->
    <br>Input is : <strong>{{FirstName}}</strong><!-- Successfully updates here -->
</div>

<hr>

<div ng-controller="SecondCtrl">
    Input should also be here: {{FirstName}}<!-- How do I automatically updated it here? -->
</div>

জাতীয়

// declare the app with no dependencies
var myApp = angular.module('myApp', []);

// make a factory to share data between controllers
myApp.factory('Data', function(){
    // I know this doesn't work, but what will?
    var FirstName = '';
    return FirstName;
});

// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){

});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});

কোন সাহায্য ব্যাপকভাবে প্রশংসা করা হয়।

Comments

সম্ভাব্য সদৃশ আমি দোকানে ভেরিয়েবল কৌণিক মধ্যে $ rootScope কিভাবে ব্যবহার করব?

— এমবিয়েলস্কি

Answer 1

একটি সহজ সমাধান হ'ল আপনার ফ্যাক্টরিটি কোনও জিনিস ফেরত দেয় এবং আপনার নিয়ন্ত্রকদের একই বস্তুর রেফারেন্স সহ কাজ করতে দেয়:

জাতীয়:

// declare the app with no dependencies
var myApp = angular.module('myApp', []);

// Create the factory that share the Fact
myApp.factory('Fact', function(){
  return { Field: '' };
});

// Two controllers sharing an object that has a string in it
myApp.controller('FirstCtrl', function( $scope, Fact ){
  $scope.Alpha = Fact;
});

myApp.controller('SecondCtrl', function( $scope, Fact ){
  $scope.Beta = Fact;
});

এইচটিএমএল:

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="Alpha.Field">
    First {{Alpha.Field}}
</div>

<div ng-controller="SecondCtrl">
<input type="text" ng-model="Beta.Field">
    Second {{Beta.Field}}
</div>

ডেমো: http://jsfiddle.net/HEdJF/

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

myApp.factory('Data', function () {

    var data = {
        FirstName: ''
    };

    return {
        getFirstName: function () {
            return data.FirstName;
        },
        setFirstName: function (firstName) {
            data.FirstName = firstName;
        }
    };
});

এই পদ্ধতির সাথে সাথে গ্রাহকরা নতুন মান সহ কারখানার আপডেট করতে পারবেন এবং সেগুলি পরিবর্তন করার জন্য এটি দেখুন:

myApp.controller('FirstCtrl', function ($scope, Data) {

    $scope.firstName = '';

    $scope.$watch('firstName', function (newValue, oldValue) {
        if (newValue !== oldValue) Data.setFirstName(newValue);
    });
});

myApp.controller('SecondCtrl', function ($scope, Data) {

    $scope.$watch(function () { return Data.getFirstName(); }, function (newValue, oldValue) {
        if (newValue !== oldValue) $scope.firstName = newValue;
    });
});

এইচটিএমএল:

<div ng-controller="FirstCtrl">
  <input type="text" ng-model="firstName">
  <br>Input is : <strong>{{firstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{firstName}}
</div>

ডেমো: http://jsfiddle.net/27mk1n1o/

Comments

প্রথম সমাধানটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে - পরিষেবাটি যদি বস্তুটি বজায় রাখে এবং নিয়ন্ত্রণকারীরা কেবল রেফারেন্স সহ পরিচালনা করে। অনেক ধন্যবাদ

— জনকিজ

$ সুযোগ। $ ঘড়ির পদ্ধতিটি একটি সুযোগ থেকে বিশ্রাম কল করা এবং ফলাফলগুলি অন্য সুযোগে প্রয়োগ করার জন্য

— সুন্দরভাবে কাজ করে

return { FirstName: '' };কোনও বস্তুর সাথে ইন্টারঅ্যাক্ট পদ্ধতিযুক্ত আইটেমটির মতো ফেরত বা ফিরে আসার পরিবর্তে, কোনও শ্রেণীর উদাহরণ ( function) উদাহরণ প্রদান করা কি উত্তম হবে না যাতে আপনি যখন নিজের অবজেক্টটি ব্যবহার করেন, তখন এটি একটি নির্দিষ্ট ধরণের থাকে এবং এটি কেবল না একটি "অবজেক্ট {}"?

— আরপিডিজেস

কেবল একটি মাথা আপ, শ্রোতার ফাংশনটির newValue !== oldValueচেক দরকার নেই কারণ অ্যাংুলার যদি পুরানোভ্যালু এবং নিউভ্যালু একই থাকে তবে ফাংশনটি কার্যকর করে না। এটির একমাত্র ব্যতিক্রম হ'ল যদি আপনি প্রাথমিক মানটি যত্ন নেন। দেখুন: docs.angularjs.org/api/ng/type/$rootScope.cop#$watch

— গৌতম সি

@ টাসেক্যাট, আমি পৃষ্ঠাটি রিফ্রেশ না করলে এটি ভাল কাজ করে। পৃষ্ঠাটি রিফ্রেশ করলে আপনি কি আমাকে কোনও সমাধানের পরামর্শ দিতে পারবেন ???

— MaNn

Answer 2

আমি $watchএই জন্য না ব্যবহার পছন্দ । কোনও নিয়ামকের স্কোপটিতে পুরো পরিষেবাটি বরাদ্দ করার পরিবর্তে আপনি কেবল ডেটা বরাদ্দ করতে পারেন।

জাতীয়:

var myApp = angular.module('myApp', []);

myApp.factory('MyService', function(){
  return {
    data: {
      firstName: '',
      lastName: ''
    }
    // Other methods or objects can go here
  };
});

myApp.controller('FirstCtrl', function($scope, MyService){
  $scope.data = MyService.data;
});

myApp.controller('SecondCtrl', function($scope, MyService){
   $scope.data = MyService.data;
});

এইচটিএমএল:

<div ng-controller="FirstCtrl">
  <input type="text" ng-model="data.firstName">
  <br>Input is : <strong>{{data.firstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{data.firstName}}
</div>

বিকল্পভাবে আপনি সরাসরি পদ্ধতিতে পরিষেবা ডেটা আপডেট করতে পারেন।

জাতীয়:

// A new factory with an update method
myApp.factory('MyService', function(){
  return {
    data: {
      firstName: '',
      lastName: ''
    },
    update: function(first, last) {
      // Improve this method as needed
      this.data.firstName = first;
      this.data.lastName = last;
    }
  };
});

// Your controller can use the service's update method
myApp.controller('SecondCtrl', function($scope, MyService){
   $scope.data = MyService.data;

   $scope.updateData = function(first, last) {
     MyService.update(first, last);
   }
});

Comments

আপনি স্পষ্টভাবে ঘড়ি () ব্যবহার করবেন না তবে অভ্যন্তরীণভাবে AngularJS $ স্কোপ ভেরিয়েবলের মধ্যে নতুন মানগুলির সাথে ভিউটি আপডেট করার জন্য করে। পারফরম্যান্সের বিচারে এটি একই নাকি না?

— মার্ট ডোমিংয়েজ

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

— বেনিক

এটি $ ঘড়ির বিকল্প নয়। এই ক্ষেত্রে নিয়ামকগণকে $ ঘড়ি ব্যবহার না করেই দুটি কৌণিক বস্তুর মধ্যে ডেটা ভাগ করার ভিন্ন উপায়।

— বেনিক

আইএমও এই সমাধানটি সেরা কারণ কারণ এটি অ্যাংুলারের ঘোষণামূলক পদ্ধতির চেতনাতে আরও বেশি $ ওয়াচ স্টেটমেন্ট যোগ করার বিপরীতে, যা কিছুটা আরও jQuery-esque বোধ করে।

— জেমসজি

কেন আমি সবচেয়ে আশ্চর্যের সাথে সবচেয়ে বেশি জবাব দিলাম না। সর্বোপরি $ ঘড়ি

— কোডটিকে

Answer 3

আপনি নিয়ন্ত্রণকারীদের মধ্যে ডেটা ভাগ করতে পারেন এমন অনেকগুলি উপায় রয়েছে

1. পরিষেবা ব্যবহার করে
2. । state.go পরিষেবা ব্যবহার করে
3. stateparams ব্যবহার করে
4. রুটস্কোপ ব্যবহার

প্রতিটি পদ্ধতির ব্যাখ্যা:

1. এটি ইতিমধ্যে কারও দ্বারা ব্যাখ্যা করা হিসাবে আমি ব্যাখ্যা করতে যাচ্ছি না

2. ব্যবহার $state.go

     $state.go('book.name', {Name: 'XYZ'}); 
   
     // then get parameter out of URL
     $state.params.Name;

3. $stateparam একইভাবে কাজ করে $state.go , আপনি প্রেরক নিয়ন্ত্রকের কাছ থেকে অবজেক্ট হিসাবে এটি পাস করেন এবং স্টেটপ্যারাম ব্যবহার করে রিসিভার কন্ট্রোলারে সংগ্রহ করেন

4. ব্যবহার $rootscope

   (ক) সন্তানের কাছ থেকে পিতামাতার নিয়ন্ত্রকের কাছে ডেটা প্রেরণ

     $scope.Save(Obj,function(data) {
         $scope.$emit('savedata',data); 
         //pass the data as the second parameter
     });
   
     $scope.$on('savedata',function(event,data) {
         //receive the data as second parameter
     }); 

   (খ) শিশু নিয়ন্ত্রণকারীকে পিতামাতার কাছ থেকে ডেটা প্রেরণ

     $scope.SaveDB(Obj,function(data){
         $scope.$broadcast('savedata',data);
     });
   
     $scope.SaveDB(Obj,function(data){`enter code here`
         $rootScope.$broadcast('saveCallback',data);
     });

Answer 4

আমি একটি কারখানা তৈরি করেছি যা রুটের পথের প্যাটার্নের মধ্যে ভাগ করে নেওয়া স্কোপকে নিয়ন্ত্রণ করে, তাই আপনি যখন একই পথের প্যারেন্ট পাথে নেভিগেট করেন তখন আপনি ভাগ করা ডেটা বজায় রাখতে পারেন।

.controller('CadastroController', ['$scope', 'RouteSharedScope',
    function($scope, routeSharedScope) {
      var customerScope = routeSharedScope.scopeFor('/Customer');
      //var indexScope = routeSharedScope.scopeFor('/');
    }
 ])

সুতরাং, যদি ব্যবহারকারী অন্য কোনও রুটে যায়, উদাহরণস্বরূপ '/ সমর্থন', '/ গ্রাহক' পথের জন্য ভাগ করা ডেটা স্বয়ংক্রিয়ভাবে ধ্বংস হয়ে যাবে। তবে এর পরিবর্তে যদি ব্যবহারকারী '/' গ্রাহক / 1 'বা' / গ্রাহক / তালিকা 'এর মতো' শিশু 'পথে যায় তবে স্কোপটি নষ্ট হবে না।

আপনি এখানে একটি নমুনা দেখতে পারেন: http://plnkr.co/edit/OL8of9

Comments

আপনার $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ ... })যদি ui.router থাকে তবে ব্যবহার করুন

— নুনো সিলভা

Answer 5

নিয়ন্ত্রকদের মধ্যে ডেটা ভাগ করার একাধিক উপায় রয়েছে

• কৌণিক সেবা
• $ সম্প্রচার, mit নির্গমন পদ্ধতি
• শিশু নিয়ন্ত্রক যোগাযোগের জন্য পিতামাতার
• $ rootscope

আমরা জানি যে $rootscope ডেটা স্থানান্তর বা যোগাযোগের পক্ষে পছন্দনীয় উপায় নয় কারণ এটি একটি বিশ্বব্যাপী সুযোগ যা পুরো প্রয়োগের জন্য উপলব্ধ

কৌণিক জেস নিয়ন্ত্রণকারীদের মধ্যে ডেটা ভাগ করার জন্য কৌণিক পরিষেবাগুলি সর্বোত্তম অনুশীলন যেমন eg .factory, .service
জন্য রেফারেন্স

শিশু নিয়ামক পেরেন্টকে থেকে তথ্য স্থানান্তর যদি আপনি মাধ্যমে সন্তান নিয়ামক সরাসরি এক্সেস পিতা বা মাতা ডেটা পারেন $scope
আপনি ব্যবহার করে থাকেন ui-routerতাহলে আপনি ব্যবহার করতে পারেন $stateParmasURL প্যারামিটার মত পাস id, name, key, ইত্যাদি

$broadcastএছাড়াও শিশু এবং পিতা বা মাতা থেকে কন্ট্রোলার মধ্যে হস্তান্তর তথ্য ভাল উপায় $emitশিশু থেকে পিতা বা মাতা কন্ট্রোলার স্থানান্তর ডেটাতে

এইচটিএমএল

<div ng-controller="FirstCtrl">
   <input type="text" ng-model="FirstName">
   <br>Input is : <strong>{{FirstName}}</strong>
</div>

<hr>

<div ng-controller="SecondCtrl">
   Input should also be here: {{FirstName}}
</div>

জাতীয়

myApp.controller('FirstCtrl', function( $rootScope, Data ){
    $rootScope.$broadcast('myData', {'FirstName': 'Peter'})
});

myApp.controller('SecondCtrl', function( $rootScope, Data ){
    $rootScope.$on('myData', function(event, data) {
       $scope.FirstName = data;
       console.log(data); // Check in console how data is coming
    });
});

আরও জানার জন্য প্রদত্ত লিঙ্কটি দেখুন$broadcast

Answer 6

সহজ সমাধান:

আমি একটি AngularJS পরিষেবা ব্যবহার করেছি ।

পদক্ষেপ 1: আমি শ্যারডেডাটা সার্ভিস নামে একটি কৌণিক জেএস পরিষেবা তৈরি করেছি।

myApp.service('SharedDataService', function () {
     var Person = {
        name: ''

    };
    return Person;
});

পদক্ষেপ 2: দুটি নিয়ামক তৈরি করুন এবং উপরের তৈরি পরিষেবাটি ব্যবহার করুন।

//First Controller
myApp.controller("FirstCtrl", ['$scope', 'SharedDataService',
   function ($scope, SharedDataService) {
   $scope.Person = SharedDataService;
   }]);

//Second Controller
myApp.controller("SecondCtrl", ['$scope', 'SharedDataService',
   function ($scope, SharedDataService) {
   $scope.Person = SharedDataService;
   }]);

স্টিপি 3: দৃশ্যটিতে তৈরি কন্ট্রোলারগুলি কেবল ব্যবহার করুন।

<body ng-app="myApp">

<div ng-controller="FirstCtrl">
<input type="text" ng-model="Person.name">
<br>Input is : <strong>{{Person.name}}</strong>
</div>

<hr>

<div ng-controller="SecondCtrl">
Input should also be here: {{Person.name}}
</div>

</body>

এই সমস্যার কাজের সমাধান দেখতে দয়া করে নীচের লিঙ্কটি টিপুন

https://codepen.io/wins/pen/bmoYLr

.html ফাইল:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp">

  <div ng-controller="FirstCtrl">
    <input type="text" ng-model="Person.name">
    <br>Input is : <strong>{{Person.name}}</strong>
   </div>

<hr>

  <div ng-controller="SecondCtrl">
    Input should also be here: {{Person.name}}
  </div>

//Script starts from here

<script>

var myApp = angular.module("myApp",[]);
//create SharedDataService
myApp.service('SharedDataService', function () {
     var Person = {
        name: ''

    };
    return Person;
});

//First Controller
myApp.controller("FirstCtrl", ['$scope', 'SharedDataService',
    function ($scope, SharedDataService) {
    $scope.Person = SharedDataService;
    }]);

//Second Controller
myApp.controller("SecondCtrl", ['$scope', 'SharedDataService',
    function ($scope, SharedDataService) {
    $scope.Person = SharedDataService;
}]);

</script>


</body>
</html>

Comments

এটি আমাদের পক্ষে কৌণিক জে ব্যবহার করে নতুন লোকের জন্য খুব স্পষ্ট উদাহরণ। আপনি কীভাবে পিতামাতার / সন্তানের সম্পর্ক থেকে ডেটা ভাগ করে / পাস করবেন? FirstCtrlপিতা বা মাতা এবং একটি প্রতিশ্রুতি পায় যে SecondCtrl(শিশু) এছাড়াও প্রয়োজন হবে? আমি দুটি এপি কল করতে চাই না। ধন্যবাদ।

— ক্রিস 22

Answer 7

কৌনিক কোডপি ব্যবহার করে ang ঘড়ি ব্যবহার না করেই অন্য উপায় রয়েছে:

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){

    var service = {
        FirstName: '',
        setFirstName: function(name) {
            // this is the trick to sync the data
            // so no need for a $watch function
            // call this from anywhere when you need to update FirstName
            angular.copy(name, service.FirstName); 
        }
    };
    return service;
});


// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){

});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});

Answer 8

এটি করার একাধিক উপায় রয়েছে।

1. ইভেন্টস - ইতিমধ্যে ভাল ব্যাখ্যা করা হয়েছে।

2. ui রাউটার - উপরে বর্ণিত।

3. পরিষেবা - উপরে প্রদর্শিত আপডেট পদ্ধতি সহ
4. খারাপ - পরিবর্তনের জন্য পর্যবেক্ষণ।
5. নির্গত এবং ব্রডকাস্টের পরিবর্তে অন্য একটি পিতামাতার সন্তানের পদ্ধতি -

*

<superhero flight speed strength> Superman is here! </superhero>
<superhero speed> Flash is here! </superhero>

*

app.directive('superhero', function(){
    return {
        restrict: 'E',
        scope:{}, // IMPORTANT - to make the scope isolated else we will pollute it in case of a multiple components.
        controller: function($scope){
            $scope.abilities = [];
            this.addStrength = function(){
                $scope.abilities.push("strength");
            }
            this.addSpeed = function(){
                $scope.abilities.push("speed");
            }
            this.addFlight = function(){
                $scope.abilities.push("flight");
            }
        },
        link: function(scope, element, attrs){
            element.addClass('button');
            element.on('mouseenter', function(){
               console.log(scope.abilities);
            })
        }
    }
});
app.directive('strength', function(){
    return{
        require:'superhero',
        link: function(scope, element, attrs, superHeroCtrl){
            superHeroCtrl.addStrength();
        }
    }
});
app.directive('speed', function(){
    return{
        require:'superhero',
        link: function(scope, element, attrs, superHeroCtrl){
            superHeroCtrl.addSpeed();
        }
    }
});
app.directive('flight', function(){
    return{
        require:'superhero',
        link: function(scope, element, attrs, superHeroCtrl){
            superHeroCtrl.addFlight();
        }
    }
});

Answer 9

আমি এই প্যাটার্নটি কোথায় নিয়েছি তা নিশ্চিত নয় তবে কন্ট্রোলারগুলিতে ডেটা ভাগ করে নেওয়ার এবং $ রুটস্কোপ এবং $ স্কোপ হ্রাস করার জন্য এটি দুর্দান্ত কাজ করে। এটি এমন একটি ডেটা প্রতিরূপের স্মরণ করিয়ে দেয় যেখানে আপনার প্রকাশক এবং গ্রাহকরা থাকেন। আশা করি এটা সাহায্য করবে.

সেবা:

(function(app) {
    "use strict";
    app.factory("sharedDataEventHub", sharedDataEventHub);

    sharedDataEventHub.$inject = ["$rootScope"];

    function sharedDataEventHub($rootScope) {
        var DATA_CHANGE = "DATA_CHANGE_EVENT";
        var service = {
            changeData: changeData,
            onChangeData: onChangeData
        };
        return service;

        function changeData(obj) {
            $rootScope.$broadcast(DATA_CHANGE, obj);
        }

        function onChangeData($scope, handler) {
            $scope.$on(DATA_CHANGE, function(event, obj) {
                handler(obj);
            });
        }
    }
}(app));

নতুন তথ্য পাচ্ছে এমন কন্ট্রোলার যা প্রকাশক এই জাতীয় কিছু করবে ..

var someData = yourDataService.getSomeData();

sharedDataEventHub.changeData(someData);

যে নতুন কন্ট্রোলার এই নতুন ডেটাও ব্যবহার করে যা সাবস্ক্রাইবার বলে এটি এরকম কিছু করবে ...

sharedDataEventHub.onChangeData($scope, function(data) {
    vm.localData.Property1 = data.Property1;
    vm.localData.Property2 = data.Property2;
});

এটি যে কোনও দৃশ্যের জন্য কাজ করবে। সুতরাং যখন প্রাথমিক নিয়ামকটি আরম্ভ করা হয় এবং এটি ডেটা পায় তখন তা চেঞ্জডেটা পদ্ধতিতে কল করবে যা তখন সেই তথ্যটি সমস্ত গ্রাহকদের কাছে প্রচার করে। এটি একে অপরের সাথে আমাদের নিয়ন্ত্রকদের সংযুক্তিকে হ্রাস করে।

Comments

নিয়ন্ত্রণকারীদের মধ্যে রাজ্য ভাগ করে এমন একটি 'মডেল' ব্যবহার করা বেশিরভাগ ক্ষেত্রে ব্যবহৃত বিকল্প হিসাবে মনে হয়। দুর্ভাগ্যক্রমে এটি দৃশ্যের আওতায় পড়ে না যেখানে আপনি শিশু নিয়ামককে রিফ্রেশ করবেন। আপনি কীভাবে সার্ভার থেকে ডেটা 'পুনরায় পাঠাবেন' এবং মডেলটি পুনরায় তৈরি করবেন? এবং আপনি কীভাবে অবৈধতা মোকাবেলা করবেন?

— আন্দ্রেই

আমি মনে করি অভিভাবক এবং শিশু নিয়ন্ত্রণকারীদের ধারণাটি কিছুটা বিপজ্জনক এবং একে অপরের উপর অনেক বেশি নির্ভরশীলতার কারণ হয়ে দাঁড়ায়। তবে, যখন ইউআই-রাউটারের সাথে সংমিশ্রণে ব্যবহৃত হয়, আপনি সহজেই আপনার "সন্তানের" ডেটা রিফ্রেশ করতে পারেন, বিশেষত যদি সেই ডেটাটি রাষ্ট্রের কনফিগারেশনের মাধ্যমে ইনজেকশনের সাথে থাকে। ক্যাশে অবৈধতা প্রকাশকের উপর ঘটে যার দ্বারা তারা ডেটা পুনরুদ্ধার এবং কল করার জন্য দায়ী sharedDataEventHub.changeData(newData)

— থাকবেন

আমি মনে করি একটি ভুল বোঝাবুঝি আছে। রিফ্রেশ করে আমি বলতে চাইছি ব্যবহারকারীরা আক্ষরিকভাবে কীবোর্ডে F5 কী টিপুন এবং ব্রাউজারটিকে একটি পোস্ট ফিরে করতে দেয়। আপনি যখন সন্তানের সাথে থাকেন / বিশদ দর্শনটি ঘটে তখন, "var someData = yourDataService.getSomeData ()" কল করার কেউ নেই। প্রশ্নটি হল, আপনি এই পরিস্থিতিটি কীভাবে মোকাবেলা করবেন? কে মডেল আপডেট করা উচিত?

— Andrei

আপনি কীভাবে আপনার কন্ট্রোলারকে সক্রিয় করবেন তার উপর নির্ভর করে এটি খুব সহজ হতে পারে। আপনার যদি এমন একটি পদ্ধতি থাকে যা সক্রিয় করে তোলে তবে প্রারম্ভিকভাবে ডেটা লোড করার জন্য দায়বদ্ধ কন্ট্রোলার এটি লোড করবে এবং তারপরে sharedDataEventHub.changeData(newData)যে কোনও শিশু বা নিয়ামক সেই ডেটার উপর নির্ভর করবে তাদের নিয়ন্ত্রণকারী দেহে অন্য কোথাও নিম্নলিখিতটি sharedDataEventHub.onChangeData($scope, function(obj) { vm.myObject = obj.data; });ব্যবহার করবে : আপনি যদি ইউআই ব্যবহার করেন - রাউটারটি এটিকে রাষ্ট্রের কনফিগারেশন থেকে ইনজেক্ট করা যেতে পারে।

— ewahner

এখানে একটি উদাহরণ যা আমি বর্ণনা করতে চাইছি যে সমস্যাটি ইলাস্ট্রেট করে : plnkr.co/edit/OcI30YX5Jx4oHyxHEkPx?p= পূর্বরূপ দেখুন । যদি আপনি প্লাঙ্ক আউট করেন, সম্পাদনা পৃষ্ঠায় নেভিগেট করুন এবং ব্রাউজারটি রিফ্রেশ করুন, এটি ক্রাশ হবে sh এক্ষেত্রে কার মডেলটি পুনরায় তৈরি করা উচিত?

— আন্দ্রেই

Answer 10

কেবল এটি সহজ করুন (v1.3.15 দিয়ে পরীক্ষিত):

<article ng-controller="ctrl1 as c1">
    <label>Change name here:</label>
    <input ng-model="c1.sData.name" />
    <h1>Control 1: {{c1.sData.name}}, {{c1.sData.age}}</h1>
</article>
<article ng-controller="ctrl2 as c2">
    <label>Change age here:</label>
    <input ng-model="c2.sData.age" />
    <h1>Control 2: {{c2.sData.name}}, {{c2.sData.age}}</h1>
</article>

<script>
    var app = angular.module("MyApp", []);

    var dummy = {name: "Joe", age: 25};

    app.controller("ctrl1", function () {
        this.sData = dummy;
    });

    app.controller("ctrl2", function () {
        this.sData = dummy;
    });
</script>

Comments

আমি মনে করি এটি ডাউন-ভোট হয়েছে কারণ এটি মডিউল নয়। dummyউভয় নিয়ন্ত্রকের কাছে বৈশ্বিক হ'ল উত্তরাধিকারের মাধ্যমে $ স্কোপ বা নিয়ামক হিসাবে বা কোনও পরিষেবা ব্যবহারের মাধ্যমে আরও বেশি মডুলার উপায়ে ভাগ করা।

— চাদ জনসন