angularjs - घटक कोण के बीच चर को साझा करें 1.5



angularjs-directive angularjs-scope (1)

मेरे पास इस तरह एक कोणीय घटक सेटअप है:

(function(angular) {
'use strict';
angular.module('bar', [])
angular.module('bar').component('bar', {
template: '<h1 ng-show="showMe">It worked</h1>',
bindings: {
  showMe: '='
   }
 });
})(window.angular);

और इस तरह एक और सेटअप

(function(angular) {
'use strict';
angular.module('foo', [])
angular.module('foo').component('foo', {
template: '<button ng-click="showMe = true">Click Me</button>' +
        '<bar showMe = "showMe"></bar>'
});
})(window.angular);

मेरी index.html

<foo>Hello Plunker!</foo>

लेकिन मुझे टेम्प्लेट इन बार काम करने के लिए नहीं मिल सकता है। मैं क्या खो रहा हूँ?

मेरे पास यहां एक प्लंकर है: https://plnkr.co/edit/Qj9ZL9NFtdXWHBY0yzJf?p=preview


मुझे संदेह है कि आप इस तथ्य से लड़ रहे हैं कि घटक स्कोप हमेशा अलग होते हैं (यदि आप बाइंडिंग घोषित करते हैं तो केवल माता-पिता के दायरे तक पहुंच होती है)

मुझे संदेह है कि आपके कोड को ऐसा कुछ देखना होगा:

<foo newPopup="'something'">
  <!-- bar inside foo's template -->
  <bar newPopup="$ctrl.newPopup"></bar>
  <!-- end foo's template -->
</foo>

निदेशकों को मूल रूप से माता-पिता के दायरे तक पहुंच प्रदान करते हैं, जो समझ सकते हैं कि यह आंतरिक घटक (संभवतया बार) में आपके लिए एक निर्देश के रूप में काम करता है, क्योंकि वह माता-पिता $ ctrl पर पहुंच प्राप्त कर सकता है (क्योंकि निर्देश डिफ़ॉल्ट रूप से नियंत्रक नहीं सेट करते हैं)।

संपादित करें: मुझे अभी भी लगता है कि मेरा मूल उत्तर सच है और निर्देशों के साथ यह गुंजाइश के साथ काम कर रहा था। प्लंकेयर में कुछ अन्य फिक्स (नीचे 2 और तीन) हैं जो मैं अनुमान लगा रहा हूं कि मूल मुद्दे से असंबंधित है, क्योंकि अगर वे थे तो मैं कल्पना नहीं कर सकता था कि यह एक निर्देश के रूप में भी काम करेगा।

निम्नलिखित परिवर्तनों को आपके लार्दी का काम करना चाहिए:

  1. जब भी आप किसी घटक में एक स्कोप वैरिएबल का उल्लेख करते हैं, तो इसे $ ctrl (या जो कुछ भी आपके नियंत्रक का मूल्य उस घटक $ ctrl के लिए होता है, उस घटक में डिफ़ॉल्ट होता है, जहां निर्देशक के लिए वाक्यविन्यास निर्देशों के लिए डिफ़ॉल्ट नहीं है)
  2. फू मॉड्यूल को पट्टी पर बनाओ (यह उपभोग कर रहा है, इसलिए इसे उस पर निर्भर होना चाहिए)
  3. नमक के लिए टेम्पलेट परिवर्तन की राजधानियों में ऊप का हिस्सा (निर्देशों के लिए) या बाध्यकारी (घटक के लिए) मूल्यों को संदर्भित करते हुए और डैश जोड़ें (उदा। ऊंट बैक -> ऊंट बैक)

https://plnkr.co/edit/ka2owI?p=preview

foo.js

(function(angular) {
  'use strict';
  angular.module('foo', ['bar'])
  angular.module('foo').component('foo', {
  template: '<button ng-click="$ctrl.showMe = true">Click Me</button>' +
            '<bar show-me = "$ctrl.showMe"></bar>'
});
})(window.angular);

bar.js

(function(angular) {
  'use strict';
  angular.module('bar', [])
  angular.module('bar').component('bar', {
    template: '<h1 ng-show="$ctrl.showMe">It worked</h1>',
    bindings: {
      showMe: '='
    }
  });
})(window.angular);

अधिक स्पष्टता के लिए (क्योंकि $ ctrl दो बार ऊपर प्रयोग किया जाता है और इसके उपयोग में लात में उपयोग करने वाले विपिन्दगी में), आप अलग-अलग नियंत्रक हो सकते हैं यहां मान और foo के बार में पहुंच योग्य नहीं होना चाहिए। foo.js और bar.js जैसे ही उचित रूप से हो सकता है और यह अभी भी काम करेगा:

foo.js

(function(angular) {
  'use strict';
  angular.module('foo', ['bar'])
  angular.module('foo').component('foo', {
  controllerAs: 'fooCtrl',
  template: '<button ng-click="fooCtrl.showMe = true">Click Me</button>' +
            '<bar show-me = "fooCtrl.showMe"></bar>'
});
})(window.angular);

bar.js

(function(angular) {
  'use strict';
  angular.module('bar', [])
  angular.module('bar').component('bar', {
    controllerAs: 'barCtrl',
    template: '<h1 ng-show="barCtrl.showMe">It worked</h1>',
    bindings: {
      showMe: '='
    }
  });
})(window.angular);




angularjs-scope