javascript मेरे घटक बाइंडिंग इसके नियंत्रक में अपरिभाषित क्यों हैं?




angularjs angularjs-1.5 (7)

मैं आपको कुछ ऐसे बदलावों के बारे में बताऊंगा जिनसे आपको इन असामान्य बगों से बचना होगा।

app.component("test", {
  bindings: {
    "myContactId": "<"
  },
  controller:function(){
   var self=this;
   this.$onInit=function(){
    // do all your initializations here.
    // create a local scope object for this component only. always update that scope with bindings. and use that in views also.

       self.myScopeObject=self.myContactId
   }
  },
   template:'<p>{{$ctrl.myScopeObject}}</p>'
 }

<test my-contact-id="8"></test>

कुछ बिंदु:

  1. html में एक घटक के लिए बाइंडिंग पास करना हमेशा कबाब पूर्व मेरी-संपर्क-आईडी के लिए जा रहा है और इसके संबंधित जावास्क्रिप्ट वेरिएबल कैमल केसेड होंगे: myContactId।

  2. यदि आप बाइंडिंग में ऑब्जेक्ट का उपयोग '@' से कर रहे हैं। यदि आप किसी ऑब्जेक्ट का उपयोग कर रहे हैं और ऑब्जेक्ट को बाइंडिग के लिए पास कर रहे हैं '<। यदि आप बाइंडिंग कॉन्फिग में '=' ​​का उपयोग उस ऑब्जेक्ट के लिए 2-तरह से बाध्यकारी चाहते हैं

 bindings:{
      value:'@',
      object:'<', // also known as one-way
      twoWay:'='
    }

मैं एक साधारण कोणीय घटक लिख रहा हूँ। मैं एक पैरामीटर को एक बाध्यकारी के रूप में पारित कर रहा हूं और स्क्रीन पर इसके मूल्य को प्रदर्शित करता हूं। सभी ठीक काम करता है: मैं स्क्रीन पर प्रदर्शित होने वाले पैरामीटर को देख सकता हूं।

घटक:

var app = angular.module("test", []);
app.component("test", {
  bindings: {
    "contactId": "<"
  },
  controllerAs: "model",
  controller: () => {
    //output: 'contact id from controller: undefined'
    console.log(`contact id from controller: ${this.contactId}`);
  },
  template: "<div>Contact id from view: {{model.contactId}}</div>"
});

एचटीएमएल:

<test contact-id="8"></test>

हालाँकि, जब मैं नियंत्रक के भीतर से बाइंडिंग को एक्सेस करने का प्रयास करता हूं (कंसोल देखें।), बाइंडिंग मान undefined । मुझे समझ में नहीं आता कि यह दृश्य में कैसे उपलब्ध हो सकता है, लेकिन नियंत्रक में नहीं।

मैं क्या गलत कर रहा हूं?

यहाँ समस्या का चित्रण एक plnkr है।


contactId का मान आपके कंट्रोलर में $scope पर उपलब्ध है:

var app = angular.module("test", []);
app.component("test", {
  bindings: {
    "contactId": "<"
  },
  controllerAs: "model",
  controller: ($scope) => {
    var model = $scope.model;
    alert(`contact id from controller: ${model.contactId}`);
  },
  template: "<div>Contact id from view: {{model.contactId}}</div>"
});

here अपने प्लंकर के दूसरे संस्करण से लिंक here


यह कीवर्ड ऐसा नहीं है जो तीर फ़ंक्शन के साथ काम करता है, यह साथ काम करता है

controller: function() {
   alert('contact id from controller: ' + this.contactId);
}

तीर फ़ंक्शन का उपयोग करते समय, यह , विंडो ऑब्जेक्ट को संदर्भित करता है क्योंकि

एक तीर फ़ंक्शन यह संदर्भ स्वयं नहीं बनाता है, बल्कि यह संलग्न संदर्भ के इस मूल्य को कैप्चर करता है


सुनिश्चित करें कि आप HTML में बाइंडिंग के लिए हाइफ़न का उपयोग करते हैं और जावास्क्रिप्ट में बाइंडिंग के लिए कैमलकेस।

app.component("test", {
  bindings: {
    "myContactId": "<"
  }
}

<test my-contact-id="8"></test>

यही मैं हमेशा करना भूल जाता हूं।


मैं @jusopi के अनुवर्ती और स्वीकृत उत्तर के रूप में एक और उत्तर जोड़ने जा रहा हूं, सिर्फ उन लोगों के लिए जो मेरे मुद्दे का सामना कर सकते हैं। घटक के संबंध में, $onInit हुक के बाद भी, मेरा डेटा अभी भी अशक्त था, क्योंकि सर्वर से मूल्य अभी भी प्राप्त नहीं हुआ था। इसका प्रतिकार करने के लिए (हालाँकि इस स्थिति को संभालने का एक बेहतर तरीका हो सकता है), मैंने $onChanges हुक का भी लाभ उठाया। $onChanges उस डेटा को वापस कर देगा जो इसे पारित होने पर बदल गया है, और आप उस जानकारी को पार्स कर सकते हैं, या केवल बाइंडिंग को इस रूप में कॉल कर सकते हैं। this.contactId और इसे अपडेट किया जाएगा।

documentation में अधिक विवरण दिए गए हैं: https://docs.angularjs.org/guide/component


निर्देशों का उपयोग करने वालों के लिए, जहां घटकों को ग्रहण किया जाता है, यदि बाइंडिंग {} निर्दिष्ट की जाती है, तो यह उन्हीं मापदंडों को जोड़ते हुए दिखाई देता है जैसे {}:

/*bindings: {
    modalInstance: '<',
    resolve: '<'
},*/
scope: {
    modalInstance: '<',
    resolve: '<'
},

* इसके बाद पता चला कि मैंने ऊपर लिखा है कि एक अतिरिक्त गुंजाइश पैरामीटर, फू, $ स्कोप पर उपलब्ध नहीं था जब तक कि मैंने इसे $ स्कोप से नहीं सौंपा। रिज़ॉल्व। इसलिए मुझे $ गुंजाइश में यह करना पड़ा। यह (): $ गुंजाइश.foo = $ गुंजाइश.resolve.foo। यकीन नहीं है कि क्यों। यह मेरे UI बूटस्ट्रैप मोडल + निर्देशों के उपयोग के साथ क्या करना है

यह दूसरों के लिए स्पष्ट हो सकता है, लेकिन मेरे लिए अंगुलारज के लिए अपेक्षाकृत नया नहीं था।

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


इसकी शायद यह सबसे अच्छा अभ्यास नहीं है, लेकिन आपके पास उन मूल्यों तक आसान पहुंच है:

$scope.$ctrl.contactId

आप संपत्ति में सभी बाइंडिंग $ स्कोटल $ स्कोप के अंदर प्राप्त कर सकते हैं।

मुझे इसकी मदद की उम्मीद है





angularjs-1.5