घटक को

Question

पर ऑब्जेक्ट पास करें मैंने एक घटक बनाया है जिसके लिए उस ऑब्जेक्ट का संदर्भ होना आवश्यक है जिसके लिए घटक बनाया गया था। मैंने काम नहीं किया और मेरे सभी परीक्षण विफल हो गए। नीचे, मैं इरादे का वर्णन करने की कोशिश करता हूं।

घटक परिभाषा शायद इस प्रकार दिखाई देगा:

angular 
    .module('myModule') 
    .component('myComponent', { 
     templateUrl: "template.html", 
     controller: [ 
      MyController 
     ], 
     bindings: { 
      myObject: '=' 
     } 
    }); 

function MyController(myObject) { 
    var vm = this; 

    vm.myObject = myObject; 
} 

एक सेवा में मैं इस तरह मेरी वस्तु बनाने के लिए करना चाहते हैं:

function createMyObject(args) { 
     var myObject = {some: data}; 

     myObject.ref = "<my-component myObject='{{myObject}}'></my-component>"; 
     return myObject; 
    } 

प्रश्न

मैं कैसे कर सकता है कोणीय घटक टैग को डेटा पास करें? क्या मुझे इसे काम करने के लिए एक घटक निर्देश पर वापस जाना है?

किसी भी विचार की बहुत सराहना की जाती है। धन्यवाद।

Answer 1

समाधान 1

अपने टेम्पलेट में:

<my-component key='$ctrl.myObject'></my-component> 

कोड में:

angular 
    .module('myModule') 
    .component('myComponent', { 
     templateUrl: "template.html", 
     controller: [ 
      'objectService' 
      MyController 
     ], 
     bindings: { 
      key: '=' // or key: '<' it depends on what binding you need 
     } 
    }); 

function MyController(myObject, objectService) { 
    var vm = this; 

    vm.myObject.whatever(); // myObject is assigned to 'this' automatically 
} 

समाधान 2 - घटक बाइंडिंग

घटक के माध्यम से:

angular 
.module('myModule') 
.component('myComponent', { 
    templateUrl: "template.html", 
    controller: [ 
     'objectService' 
     MyController 
    ], 
    bindings: { 
     key: '@' 
    } 
}); 
function MyController(myObject, objectService) { 
    var vm = this; 

    vm.myObject = objectService.find(vm.key); 
} 

उपयोग:

function createMyObject(args) { 
    var myObject = {key: ..., some: data}; 

    myObject.ref = "<my-component key='" + myObject.key + "'></my-component>"; 
    return myObject; 
}