Nesneyi, bileşene geçirme

Question

Bileşenin oluşturulduğu nesneye başvurması gereken bir bileşen oluşturdum. Çalışmaya gelmedim ve bütün denemeler başarısız oldu. Aşağıda, niyetini açıklamaya çalışıyorum.

bileşen tanım belki bu şekilde görünecektir:

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

function MyController(myObject) { 
    var vm = this; 

    vm.myObject = myObject; 
} 

bir hizmetle Bu gibi benim nesne oluşturmak istiyorum:

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

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

Soru

Ben nasıl verileri açısal bileşen etiketine geçir? Çalışması için bir bileşen direktifine geri dönmem gerekiyor mu?

Fikirler büyük beğeni topluyor. Teşekkür ederim.

Answer 1

Çözüm Şablonunuzda 1

:

kodunda

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

Çözüm 2 - Bileşen Bağlar

Bileşen yoluyla:

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

Kullanımı:

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

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