javascript - tutorial - AngularJS नियंत्रकों के बीच डेटा साझा करें




node js (6)

मैं नियंत्रकों के बीच डेटा साझा करने की कोशिश कर रहा हूँ। उपयोग-केस एक बहु-चरण फ़ॉर्म है, एक इनपुट में दर्ज डेटा को बाद में मूल नियंत्रक के बाहर कई डिस्प्ले स्थानों में उपयोग किया जाता है। नीचे कोड और 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;
});

कोई भी मदद बहुत ही सराहनीय होगी।


Angular.copy का उपयोग करके, $ घड़ी का उपयोग किए बिना एक और तरीका है:

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

एक साधारण समाधान यह है कि आपका कारखाना किसी ऑब्जेक्ट को वापस कर दे और अपने नियंत्रकों को उसी ऑब्जेक्ट के संदर्भ के साथ काम करने दें:

जे एस:

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

HTML:

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

HTML:

<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/


नियंत्रकों के बीच डेटा साझा करने के कई तरीके हैं

  1. सेवाओं का उपयोग करना
  2. $ state.go सेवाओं का उपयोग कर
  3. राज्यपैम का उपयोग करना
  4. जड़ का उपयोग कर

प्रत्येक विधि का स्पष्टीकरण:

  1. मैं किसी के द्वारा पहले से समझाया गया है के रूप में व्याख्या करने के लिए नहीं जा रहा हूँ

  2. $state.go का उपयोग कर

      $state.go('book.name', {Name: 'XYZ'}); 
    
      // then get parameter out of URL
      $state.params.Name;
    
  3. $stateparam समान तरीके से काम करता है, आप इसे प्रेषक नियंत्रक से ऑब्जेक्ट के रूप में पास करते हैं और राज्यपरम का उपयोग कर रिसीवर नियंत्रक में एकत्र करते हैं

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

नियंत्रकों के बीच डेटा साझा करने के कई तरीके हैं

  • कोणीय सेवाएं
  • $ प्रसारण, $ emit विधि
  • बाल नियंत्रक संचार के लिए अभिभावक
  • $ rootscope

जैसा कि हम जानते हैं कि $rootscope डेटा हस्तांतरण या संचार के लिए बेहतर तरीका नहीं है क्योंकि यह एक वैश्विक क्षेत्र है जो पूरे आवेदन के लिए उपलब्ध है

कोणीय जेएस नियंत्रकों के बीच डेटा साझा करने के लिए कोणीय सेवाएं सर्वोत्तम प्रथाओं जैसे हैं। .factory , सेवा
reference

माता-पिता से बाल नियंत्रक के डेटा स्थानांतरण के मामले में आप सीधे $scope माध्यम से बाल नियंत्रक में मूल डेटा तक पहुंच सकते हैं
यदि आप ui-router का उपयोग कर रहे हैं तो आप id , name , key इत्यादि जैसे यूआरएल पैरामीटर पास करने के लिए $stateParmas का उपयोग कर सकते हैं।

$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 बारे में और जानने के लिए दिए गए link का संदर्भ लें


मैं इसके लिए $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;
});

HTML:

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

मैंने एक ऐसा कारखाना बनाया है जो रूट पथ के पैटर्न के बीच साझा दायरे को नियंत्रित करता है, ताकि आप साझा डेटा को तब तक बनाए रख सकें जब उपयोगकर्ता एक ही मार्ग पैरेंट पथ में नेविगेट कर रहे हों।

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

इसलिए, यदि उपयोगकर्ता किसी अन्य मार्ग पथ पर जाता है, उदाहरण के लिए '/ समर्थन', पथ '/ ग्राहक' के लिए साझा डेटा स्वचालित रूप से नष्ट हो जाएगा। लेकिन, अगर इसके बजाय उपयोगकर्ता 'बच्चे' पथ पर जाता है, जैसे '/ ग्राहक / 1' या '/ ग्राहक / सूची' तो दायरा नष्ट नहीं होगा।

आप यहां एक नमूना देख सकते हैं: http://plnkr.co/edit/OL8of9





angularjs