web-dev-qa-db-fra.com

Passer l'objet au composant

J'ai créé un composant qui doit avoir une référence à l'objet pour lequel le composant a été créé. Je ne me suis pas rendu au travail et tous mes essais ont échoué. Ci-dessous, j'essaie de décrire l'intention.

La définition du composant ressemblerait peut-être à ceci:

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

function MyController(myObject) {
    var vm = this;

    vm.myObject = myObject;
}

Dans un service, je voudrais créer mon objet comme ceci:

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

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

Question

Comment puis-je transmettre des données à angular? Dois-je revenir à une directive de composant pour la faire fonctionner?

Toutes les idées sont grandement appréciés. Je vous remercie.

angularjsangularjs-directiveangularjs-components
11
Amio.io

Solution 1

Dans votre modèle:

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

Dans du code:

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
}

Solution 2 - via les liaisons de composants

Composant:

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;
}
13
Amio.io