AngularJS बाल नियंत्रक से अभिभावक दायरे का उपयोग करें




angularjs-scope (6)

मैंने data-ng-controller="xyzController as vm" का उपयोग करके अपने नियंत्रकों को स्थापित किया है

मेरे पास माता-पिता / बच्चे नेस्टेड नियंत्रकों के साथ एक परिदृश्य है। मुझे $parent.vm.property का उपयोग करके नेस्टेड एचटीएमएल में मूल गुणों तक पहुंचने में कोई समस्या नहीं है, लेकिन मैं यह नहीं समझ सकता कि मेरे बच्चे नियंत्रक के भीतर से मूल संपत्ति का उपयोग कैसे किया जाए।

मैंने $ स्कोप इंजेक्शन करने और फिर $scope.$parent.vm.property का उपयोग करने का प्रयास किया है $scope.$parent.vm.property , लेकिन यह काम नहीं कर रहा है?

क्या कोई सलाह दे सकता है?


आप स्कोप विरासत को भी रोक सकते हैं और "वैश्विक" दायरे में चीजों को स्टोर कर सकते हैं।

यदि आपके पास आपके एप्लिकेशन में मुख्य नियंत्रक है जो अन्य सभी नियंत्रकों को लपेटता है, तो आप वैश्विक दायरे में "हुक" इंस्टॉल कर सकते हैं:

function RootCtrl($scope) {
    $scope.root = $scope;
}

फिर किसी भी बच्चे नियंत्रक में, आप $scope.root साथ "वैश्विक" दायरे तक पहुंच सकते हैं। जो भी आप यहां सेट करते हैं वह विश्व स्तर पर दिखाई देगा।

उदाहरण:

function RootCtrl($scope) {
  $scope.root = $scope;
}

function ChildCtrl($scope) {
  $scope.setValue = function() {
    $scope.root.someGlobalVar = 'someVal';
  }
}

function OtherChildCtrl($scope) {
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="RootCtrl">
  
  <p ng-controller="ChildCtrl">
    <button ng-click="setValue()">Set someGlobalVar</button>
  </p>
  
  <p ng-controller="OtherChildCtrl">
    someGlobalVar value: {{someGlobalVar}}
  </p>

</div>


एक बच्चे घटक से आप 'आवश्यकता' के साथ मूल घटक के गुणों और विधियों तक पहुंच सकते हैं। यहाँ एक उदाहरण है:

जनक:

.component('myParent', mymodule.MyParentComponent)
...
controllerAs: 'vm',
...
var vm = this;
vm.parentProperty = 'hello from parent';

बाल:

require: {
    myParentCtrl: '^myParent'
},
controllerAs: 'vm',
...
var vm = this;
vm.myParentCtrl.parentProperty = 'hello from child';

जब आप वाक्य नियंत्रक के as में उपयोग कर रहे हैं, जैसे ParentController as parentCtrl , नियंत्रक को परिभाषित करने के लिए, फिर बाल नियंत्रक में अभिभावक स्कोप चर का उपयोग करने के लिए निम्न का उपयोग करें:

var id = $scope.parentCtrl.id;

जहां parentCtrl पैरेंट नियंत्रक का नाम सिंटैक्स के as उपयोग कर रहा है और id एक कंट्रोलर में परिभाषित एक चर है।


मेरा मानना ​​है कि मेरे पास हाल ही में एक समान विवाद था

function parentCtrl() {
   var pc = this; // pc stands for parent control
   pc.foobar = 'SomeVal';
}

function childCtrl($scope) {

   // now how do I get the parent control 'foobar' variable?
   // I used $scope.$parent

   var parentFoobarVariableValue = $scope.$parent.pc.foobar;

   // that did it
}

मेरा सेटअप थोड़ा अलग था, लेकिन एक ही चीज़ शायद अभी भी काम करनी चाहिए


यदि आपका एचटीएमएल नीचे जैसा है तो आप ऐसा कुछ कर सकते हैं:

<div ng-controller="ParentCtrl">
    <div ng-controller="ChildCtrl">
    </div>
</div>

फिर आप निम्नानुसार अभिभावक दायरे तक पहुंच सकते हैं

function ParentCtrl($scope) {
    $scope.cities = ["NY", "Amsterdam", "Barcelona"];
}

function ChildCtrl($scope) {
    $scope.parentcities = $scope.$parent.cities;
}

यदि आप अपने विचार से अभिभावक नियंत्रक तक पहुंचना चाहते हैं तो आपको ऐसा कुछ करना होगा:

<div ng-controller="xyzController as vm">
   {{$parent.property}}
</div>

जेएसफ़िल्ड देखें: http://jsfiddle.net/2r728/

अद्यतन करें

असल में जब आपने माता-पिता नियंत्रक में cities को परिभाषित किया है तो आपके बच्चे नियंत्रक सभी स्कोप चर का वारिस करेंगे। तो सैद्धांतिक रूप से आपको $parent को कॉल करने की आवश्यकता नहीं है। उपर्युक्त उदाहरण भी निम्नानुसार लिखा जा सकता है:

function ParentCtrl($scope) {
    $scope.cities = ["NY","Amsterdam","Barcelona"];
}

function ChildCtrl($scope) {
    $scope.parentCities = $scope.cities;
}

AngularJS दस्तावेज़ इस दृष्टिकोण का उपयोग करते हैं, here आप $scope बारे में अधिक पढ़ सकते हैं।

एक और अद्यतन

मुझे लगता है कि यह मूल पोस्टर का बेहतर जवाब है।

एचटीएमएल

<div ng-app ng-controller="ParentCtrl as pc">
    <div ng-controller="ChildCtrl as cc">
        <pre>{{cc.parentCities | json}}</pre>
        <pre>{{pc.cities | json}}</pre>
    </div>
</div>

जे एस

function ParentCtrl() {
    var vm = this;
    vm.cities = ["NY", "Amsterdam", "Barcelona"];
}

function ChildCtrl() {
    var vm = this;
    ParentCtrl.apply(vm, arguments); // Inherit parent control

    vm.parentCities = vm.cities;
}

यदि आप controller as विधि के controller as उपयोग करते हैं तो आप निम्नानुसार मूल दायरे तक पहुंच सकते हैं

function ChildCtrl($scope) {
    var vm = this;
    vm.parentCities = $scope.pc.cities; // note pc is a reference to the "ParentCtrl as pc"
}

जैसा कि आप देख सकते हैं कि $scopes तक पहुंचने में कई अलग-अलग तरीके हैं।

अद्यतन पहेली

function ParentCtrl() {
    var vm = this;
    vm.cities = ["NY", "Amsterdam", "Barcelona"];
}
    
function ChildCtrl($scope) {
    var vm = this;
    ParentCtrl.apply(vm, arguments);
    
    vm.parentCitiesByScope = $scope.pc.cities;
    vm.parentCities = vm.cities;
}
    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app ng-controller="ParentCtrl as pc">
  <div ng-controller="ChildCtrl as cc">
    <pre>{{cc.parentCities | json}}</pre>
    <pre>{{cc.parentCitiesByScope | json }}</pre>
    <pre>{{pc.cities | json}}</pre>
  </div>
</div>


शायद यह लंगड़ा है लेकिन आप उन्हें दोनों बाहरी वस्तु पर भी इंगित कर सकते हैं:

var cities = [];

function ParentCtrl() {
    var vm = this;
    vm.cities = cities;
    vm.cities[0] = 'Oakland';
}

function ChildCtrl($scope) {
    var vm = this;
    vm.cities = cities;
}

यहां लाभ यह है कि ChildCtrl में संपादन अब माता-पिता के डेटा पर प्रचारित करते हैं।







angularjs-scope