Passare oggetto al componente

Question

Ho creato un componente che deve avere un riferimento all'oggetto per il quale è stato creato il componente. Non ho fatto funzionare e tutte le mie prove hanno fallito. Sotto, cerco di descrivere l'intenzione.

la definizione del componente sarebbe forse simile a questa:

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

function MyController(myObject) { 
    var vm = this; 

    vm.myObject = myObject; 
} 

In un servizio vorrei creare il mio oggetto come questo:

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

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

Domanda

Come posso passare i dati al tag componente angolare? Devo tornare alla direttiva di un componente per farlo funzionare?

Tutte le idee sono molto apprezzate. Grazie.

Answer 1

Soluzione 1

Nel modello:

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

in codice:

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 
} 

Soluzione 2 - via associazione ai componenti

Componente:

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); 
} 

Usage:

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

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