एंगुलरजेएस चाइल्ड कंट्रोलर से पेरेंट स्कोप एक्सेस करता है

Question

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

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

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

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

Answer 1

यदि आपका HTML नीचे है तो आप ऐसा कुछ कर सकते हैं:

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

JsFiddle देखें: http://jsfiddle.net/2r728/

अपडेट करें

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

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

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

AngularJS डॉक्स इस दृष्टिकोण का उपयोग करते हैं, यहां आप इसके बारे में अधिक पढ़ सकते हैं $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विधि का उपयोग करते हैं, तो आप निम्नानुसार मूल क्षेत्र तक भी पहुँच सकते हैं

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>

Comments

मुझे लगता है कि आपके अंतिम अद्यतन के साथ दो मुद्दे हैं। 1. मूल दायरे को बनाए रखने से संभावित नामस्थान संघर्ष हो सकते हैं, और 2. ज्ञान की आवश्यकता है कि मूल नियंत्रक उपनाम 'पीसी' है। यह फिर से उपयोग को और अधिक कठिन बना देता है।

— tchen

आपने कंट्रोलर को CtrlName (...) {} फ़ंक्शन के रूप में परिभाषित किया है, लेकिन हम कोणीय नामकरण का उपयोग करके कैसे प्राप्त कर सकते हैं? जैसे: angular.module (MdlName) .controller (CtrlName, function (...) {});

— पेड्रो जस्टो डे

क्या मतलब? एक नियंत्रक सिर्फ एक समारोह है? यानीangular.module('app').controller('ParentCtrl', ParentCtrl);

— डिटर्जेंट

क्षमा करें, आप सही हैं! 'नियंत्रक के रूप में' विधि में, '$ गुंजाइश का उपयोग कर। pc.ities;' अभिभावकों के शहरों तक पहुँचने के लिए मुझे एक 'स्टेप बैक' लगता है क्योंकि अगर चाइल्डक्लाय में हमारे पास संपत्ति 'शहर' नहीं है तो यह अभिभावकों के शहरों तक ऑटो जाएगा। इस समस्या को हल करने का कोई और तरीका नहीं है?

— पेड्रो जस्टो

यह JavaScriptदेखें: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

— डायटर्ज

Answer 2

मैंने अभी जाँच की है

$scope.$parent.someProperty

मेरे लिये कार्य करता है।

और यह होगा

{{$parent.someProperty}}

देखने के लिए।

Comments

हम्म, मेरे लिए काम नहीं कर रहा। आश्चर्य है अगर यह vm वाक्यविन्यास के रूप में नियंत्रक के साथ करना है।

— zpydee

यदि आपने पैरेंट कंट्रोलर का नाम लिया है तो आप $ पेरेंट को टेम्प्लेट में छोड़ देंगे और {{vm.someProperty}}

— सोल

Answer 3

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

var id = $scope.parentCtrl.id;

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

Answer 4

कुछ बार आपको बच्चे के दायरे में सीधे माता-पिता की संपत्तियों को अपडेट करने की आवश्यकता हो सकती है। उदाहरण के लिए चाइल्ड कंट्रोलर द्वारा बदलाव के बाद अभिभावक नियंत्रण की तारीख और समय बचाने की जरूरत है। जैसे JSFiddle में कोड

एचटीएमएल

<div ng-app>
<div ng-controller="Parent">
    event.date = {{event.date}} <br/>
    event.time = {{event.time}} <br/>
    <div ng-controller="Child">
        event.date = {{event.date}}<br/>
        event.time = {{event.time}}<br/>
        <br>
        event.date: <input ng-model='event.date'><br>
        event.time: <input ng-model='event.time'><br>
    </div>
</div>

जे एस

    function Parent($scope) {
       $scope.event = {
        date: '2014/01/1',
        time: '10:01 AM'
       }
    }

    function Child($scope) {

    }

Answer 5

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

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

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>

Comments

यह वास्तव में पैमाने नहीं है। यह वैश्विक चर को परिभाषित करने जैसा है जो कई फाइलों / संदर्भों में अद्वितीय होना चाहिए।

— ZachB

मुझे स्केलिंग मुद्दा दिखाई नहीं देता है, लेकिन स्कोप वेरिएबल को 'रूट' के अलावा किसी अन्य संदर्भ में बेहतर कहा जा सकता है

— निको वेस्टरडेल

यह भी उपद्रव का एक सा है कि राज्य है कि घटक उप-पेड़ के जीवनकाल की तुलना में अधिक समय तक लटका रहता है कि इसकी आवश्यकता है।

— रोबोप्रोग

Answer 6

मेरा मानना ​​है कि हाल ही में मेरी भी ऐसी ही ख्वाहिश थी

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
}

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

Answer 7

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

जनक:

.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';

Answer 8

सुपर आसान और काम करता है, लेकिन निश्चित नहीं कि क्यों ...।

angular.module('testing')
  .directive('details', function () {
        return {
              templateUrl: 'components/details.template.html',
              restrict: 'E',                 
              controller: function ($scope) {
                    $scope.details=$scope.details;  <=== can see the parent details doing this                     
              }
        };
  });

Answer 9

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

var cities = [];

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

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

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

Comments

वैश्विक चर का परिचय खतरनाक है।

— देहाती