टेम्पलेट फ़ंक्शन घटक बाइंडिंग को इंटरपोलेट नहीं कर रहा है

Question

मैं 1.5 घटकों का उपयोग कर रहा हूं, मुझे लगता है कि हालांकि यह महत्वपूर्ण नहीं है।

मैं एक अभिभावक नियंत्रक और एक बच्चे निर्देश के बीच बाध्यकारी एक = करने की कोशिश कर रहा हूं। बच्चा अलग-अलग बाध्यकारी रूप से बाध्यकारी अंतरण कर रहा है; vm.data के बजाय नियंत्रक में परिभाषित डेटा में अंतरण करने के बजाय, यह एक स्ट्रिंग के रूप में सचमुच vm.data बाहर आ रहा है।

यदि मैं @ के साथ बाध्यकारी एक तरफ कोशिश करता हूं, तो फिर, "इंटरपोलेटेड" मान {{vm.data}} में शाब्दिक रूप से परिणाम देता है।

मैं बाल नियंत्रक के टेम्पलेट में मूल नियंत्रक में परिभाषित स्ट्रिंग कैसे प्राप्त कर सकता हूं?

angular 
    .module('app', []) 
    .controller('Ctrl', function() { 
    this.str = '<0>, blah, <1>'; 
    }) 
    .component('appComponent', { 
    restrict: 'E', 
    controller: 'Ctrl as vm', 
    template: '<div><app-str appstr-data="{{vm.str}}"></app-str></div>' 
    }) 
    .component('appStr', { 
    bindings: { appstrData: '@' }, 
    restrict: 'EA', 
    template: function($element, $attrs) { 
     console.log($attrs.appstrData) 
     return '<span>'+$attrs.appstrData+'</span>'; 
    } 
    }); 

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

Answer 1

आप बच्चे में प्रस्तुत करना आप केवल बच्चे टेम्पलेट के अंदर इसका इस्तेमाल करने {{appStr.appstrData}} प्रक्षेप का उपयोग करना चाहिए पाने के लिए स्ट्रिंग माता पिता नियंत्रक में परिभाषित प्राप्त करना चाहता था तो।

आपको सबसे पहले बदलने की जरूरत है, आप appStr टेम्पलेट से गलत template लौट रहे हैं।

के बजाय

return '<span>'+$attrs.appstrData+'</span>'; 

उपयोग

return '<span>{{appStr.appstrData}}</span>'; 

मूल रूप से तुम यहाँ की तरह घटक नाम appStr है, घटक bindings का उपयोग करने की घटक नाम का उपयोग करना चाहिए ताकि क्यों चर के बंधन का उपयोग कर सुलभ हो सकता है {{appStr.appstrData}}

घटक

.component('appStr', { 
    bindings: { appstrData: '@' }, 
    restrict: 'EA', 
    template: function($element, $attrs) { 
     return '<span>{{appStr.appstrData}}</span>'; //<--change here 
    } 
}); 

Demo Plunkr

---

Plunkr with = binding

---

Plunkr with no bindings (isolate: false) कोई अलग गुंजाइश