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

362

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

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

javascript  angularjs 
— johnkeese
स्रोत
1
— एमबेल्सकी

जवाबों:

481

एक सरल उपाय यह है कि आपके कारखाने को एक वस्तु लौटा दी जाए और आपके नियंत्रकों को उसी वस्तु के संदर्भ में काम करने दें:

जे एस:

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

— tasseKATT
स्रोत
2
पहले समाधान ने मेरे लिए सबसे अच्छा काम किया - सेवा को ऑब्जेक्ट बनाए रखा था और नियंत्रक केवल संदर्भ के साथ संभालते थे। बहुत धन्यवाद।
— जॉनकेज
5
$ स्कोप। $ वॉच विधि खूबसूरती से एक दायरे से आराम कॉल करने और दूसरे स्कोप पर परिणाम लागू करने के लिए काम करती है
— aclave1
किसी ऑब्जेक्ट को वापस करने के बजाय जैसे return { FirstName: '' };या किसी ऑब्जेक्ट को उन तरीकों से वापस करना, जो किसी ऑब्जेक्ट के साथ इंटरैक्ट करते हैं, तो क्या किसी क्लास ( function) का इंस्टेंस वापस करना प्रीफ़र्ड नहीं होगा, ताकि जब आप अपनी ऑब्जेक्ट का उपयोग करें, तो उसका एक विशिष्ट प्रकार हो और यह न केवल एक वस्तु{}" ?
— RPDeshaies
8
सिर्फ एक हेड अप, श्रोता फ़ंक्शन को newValue !== oldValueचेक की आवश्यकता नहीं है क्योंकि यदि पुराने और नएValue समान हैं तो कोणीय फ़ंक्शन को निष्पादित नहीं करता है। इसका एकमात्र अपवाद यदि आप प्रारंभिक मूल्य के बारे में परवाह करते हैं। देखें: docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch
— गौतम सी।
@tasseKATT, यह अच्छा काम करता है, अगर मैं पृष्ठ को ताज़ा नहीं करता। यदि आप पृष्ठ को ताज़ा करते हैं तो क्या आप मुझे कोई समाधान सुझा सकते हैं ???
— MaNn
71

मैं इसके लिए उपयोग नहीं करना पसंद करता हूं $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);
   }
});
— bennick
स्रोत
आप स्पष्ट रूप से घड़ी () का उपयोग नहीं करते हैं, लेकिन आंतरिक रूप से AngularJS $ गुंजाइश चर में नए मूल्यों के साथ दृश्य को अपडेट करने के लिए करता है। प्रदर्शन के मामले में यह समान है या नहीं?
— मार्ट डोमिंगेज
4
मुझे किसी भी विधि के प्रदर्शन पर यकीन नहीं है। क्या मैं समझता हूँ कि कोणीय पहले से ही एक लूप लूप की गुंजाइश पर चल रहा है, इसलिए अतिरिक्त घड़ी अभिव्यक्ति स्थापित करना शायद कोणीय के लिए अधिक काम जोड़ता है। आपको वास्तव में पता लगाने के लिए एक प्रदर्शन परीक्षण चलाना होगा। मैं केवल $ घड़ी अभिव्यक्तियों के माध्यम से अपडेट करने के लिए ऊपर दिए गए उत्तर के माध्यम से डेटा ट्रांसफर और साझा करना पसंद करता हूं।
— bennick
2
यह $ घड़ी का विकल्प नहीं है। यह दो कोणीय वस्तुओं के बीच डेटा साझा करने का एक अलग तरीका है, इस मामले में नियंत्रक, $ घड़ी का उपयोग किए बिना।
— बेनिक जूल
1
IMO यह समाधान सबसे अच्छा है क्योंकि यह $ घड़ी विवरण जोड़ने के विपरीत, कोणीय के घोषणात्मक दृष्टिकोण की भावना में अधिक है, जो थोड़ा और अधिक jQuery-esque लगता है।
— जेम्स जी पी
8
मुझे आश्चर्य है कि यह सबसे अधिक मतदान का जवाब क्यों नहीं है। सभी $ घड़ी के बाद कोड को और अधिक जटिल बना देता है
— श्यामल पारिख
11

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

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

प्रत्येक विधि की व्याख्या:

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

    (b) माता-पिता से बाल नियंत्रक को डेटा भेजना

      $scope.SaveDB(Obj,function(data){
      $scope.$broadcast('savedata',data);
  });

  $scope.SaveDB(Obj,function(data){`enter code here`
      $rootScope.$broadcast('saveCallback',data);
  });
— आयुष मिश्रा
स्रोत
6

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

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

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

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

— ओबेदान नून्स
स्रोत
का प्रयोग करें $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ ... })आप ui.router अगर
— Nuno सिल्वा
6

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

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

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

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

माता-पिता से बाल नियंत्रक में डेटा स्थानांतरण के मामले में, आप सीधे बच्चे नियंत्रक में माता-पिता के डेटा का $scope
उपयोग ui-routerकर सकते हैं यदि आप उपयोग कर रहे हैं तो आप $stateParmasयूरिया मापदंडों को पास करने के लिए उपयोग कर सकते हैं जैसे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

— ओजस कुलकर्णी
स्रोत
4

सबसे सरल समाधान:

मैंने एक AngularJS सेवा का उपयोग किया है ।

Step1: मैंने SharedDataService नाम की एक AngularJS सेवा बनाई है।

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

    };
    return Person;
});

Step2: दो नियंत्रक बनाएं और ऊपर बनाई गई सेवा का उपयोग करें।

//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>
— wins999
स्रोत
1
यह हमारे लिए बहुत स्पष्ट उदाहरण है कि कोणीयजे का उपयोग करते हुए नए लोक। आप माता-पिता / बच्चे के रिश्ते से डेटा कैसे साझा / पास करेंगे? FirstCtrlमाता-पिता है और एक वादा करता है कि SecondCtrl(बच्चे) की भी आवश्यकता होगी? मैं दो एपीआई कॉल नहीं करना चाहता। धन्यवाद।
— 16:22 पर क्रिस 22
1

$ घड़ी का उपयोग किए बिना एक और तरीका है, 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;
});
— हिन्रिच
स्रोत
1

ऐसा करने के कई तरीके हैं।

  1. घटनाएँ - पहले से ही अच्छी तरह से समझाया।

  2. उई राउटर - ऊपर बताया गया है।

  3. सेवा - ऊपर प्रदर्शित अद्यतन विधि के साथ
  4. खराब - परिवर्तनों के लिए देखना।
  5. एक और माता पिता के बच्चे दृष्टिकोण के बजाय फेंकना और brodcast -

*

<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();
        }
    }
});
— user2756335
स्रोत
0

निश्चित नहीं है कि मैंने इस पैटर्न को कहां उठाया है, लेकिन नियंत्रकों के डेटा को साझा करने और $ rootScope और $ गुंजाइश को कम करने के लिए यह बहुत अच्छा काम करता है। यह एक डेटा प्रतिकृति की याद दिलाता है जहां आपके प्रकाशक और ग्राहक हैं। आशा है ये मदद करेगा।

सेवा:

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

यह किसी भी परिदृश्य के लिए काम करेगा। इसलिए जब प्राथमिक कंट्रोलर को इनिशियलाइज़ किया जाता है और उसे डेटा मिलता है, तो वह चेंजडैट मेथड को कॉल करेगा, जो उस डेटा के सभी सब्सक्राइबर के लिए प्रसारित करेगा। यह एक दूसरे को हमारे नियंत्रकों के युग्मन को कम करता है।

— ewahner
स्रोत
नियंत्रकों के बीच की स्थिति को साझा करने वाले 'मॉडल' का उपयोग करना उस विकल्प की तरह लगता है जो अधिकतर उपयोग किया जाता है। दुर्भाग्य से यह उस परिदृश्य को कवर नहीं करता है जहाँ आप बच्चे नियंत्रक को ताज़ा करेंगे। आप सर्वर से डेटा को 'रिफ्रेश' कैसे करते हैं और मॉडल को फिर से बनाते हैं? और आप कैश अमान्यकरण से कैसे निपटेंगे?
— आंद्रेई
मुझे लगता है कि माता-पिता और बाल नियंत्रकों का विचार थोड़ा खतरनाक है और एक-दूसरे पर बहुत अधिक निर्भरता का कारण बनता है। हालांकि, जब यूआई-राउटर के साथ संयोजन में उपयोग किया जाता है, तो आप आसानी से अपने "बच्चे" पर डेटा को ताज़ा कर सकते हैं, खासकर अगर उस डेटा को राज्य कॉन्फ़िगरेशन के माध्यम से इंजेक्ट किया जाता है। कैश अमान्य होना प्रकाशक पर होता है जिससे वे डेटा प्राप्त करने और कॉल करने के लिए जिम्मेदार होंगेsharedDataEventHub.changeData(newData)
— ewahner
मुझे लगता है कि गलतफहमी है। रिफ्रेश होने से मेरा मतलब है कि यूजर्स कीबोर्ड पर F5 कुंजी को दबाते हैं और ब्राउजर को पोस्ट बैक करने का कारण बनाते हैं। यदि ऐसा होने पर आप बच्चे / विवरण को देखते हैं, तो "var someData = yourDataService.getSomeData ()" को कॉल करने वाला कोई नहीं है। सवाल यह है कि आप इस परिदृश्य से कैसे निपटेंगे? मॉडल को किसे अपडेट करना चाहिए?
— आंद्रेई
आप अपने नियंत्रकों को कैसे सक्रिय करते हैं इसके आधार पर यह बहुत सरल हो सकता है। यदि आपके पास एक ऐसी विधि है जो सक्रिय हो जाती है, तो नियंत्रक जो शुरू में डेटा लोड करने के लिए जिम्मेदार है, उसे लोड करेगा और sharedDataEventHub.changeData(newData)फिर किसी भी बच्चे या नियंत्रक का उपयोग करेगा जो उस डेटा पर निर्भर करता है कहीं न कहीं उनके नियंत्रक शरीर में निम्नलिखित होगा: sharedDataEventHub.onChangeData($scope, function(obj) { vm.myObject = obj.data; });यदि आपने यूआई का उपयोग किया है -इससे राउटर को स्टेट कॉन्फिगर से इंजेक्ट किया जा सकता है।
— इवानर
यहाँ एक उदाहरण है जो उस समस्या को बताता है जिसे मैं वर्णन करने की कोशिश कर रहा हूँ: plnkr.co/edit/OcI30YX5Jx4oHyxHEkPx?p=preview । यदि आप प्लंक को पॉप आउट करते हैं, तो संपादन पृष्ठ पर नेविगेट करें और ब्राउज़र को ताज़ा करें, यह दुर्घटनाग्रस्त हो जाएगा। इस मामले में मॉडल को फिर से बनाना कौन चाहिए?
— आंद्रेई
-3

बस इसे सरल करें (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>

— Lumic
स्रोत
5
मुझे लगता है कि यह नीचे-मतदान था क्योंकि यह मॉड्यूलर नहीं है। dummy$ नियंत्रकों या नियंत्रकों के साथ या सेवा का उपयोग करके विरासत के माध्यम से अधिक मॉड्यूलर तरीके से साझा करने के बजाय दोनों नियंत्रकों के लिए वैश्विक है।
— चाड जॉनसन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.