Angulaire 1.5 ajouter un composant dynamiquement

Question

J'ai une application simple où j'ai un composant qui me donne des données d'un paramètre.

Je veux ajouter ce composant plusieurs fois lorsqu'un utilisateur clique sur un bouton, actuellement j'ai ceci:

<div ng-app="myApp" ng-controller="myCtrl"> 

    <my-component></my-component> 
    <br /> 
    <input type="button" ng-click="addComponent()" value="Add New Component"> 

    <div ng-repeat="c in components"> 
    {{c.content}} 
    </div> 
</div> 

et mes .js

angular.module("myApp", []).controller("myCtrl", function ($scope,$compile) { 
    $scope.components = []; 

    $scope.addComponent = function(){ 
     $scope.components.push({content: $compile('<my-component></my-component>')}); 
    } 

}); 

function componentCtrl($scope) { 
    this.text = "Hey I'm a component"; 

} 

angular.module("myApp").component('myComponent', { 
    template: '<span>{{$ctrl.text}}</span>', 
    controller: componentCtrl 
}); 

J'ai essayé avec et sans $ compiler mais je ne peux toujours pas créer le composant après le chargement de la page, le premier composant se charge bien.

Ce que je pense est que lorsque vous cliquez sur le bouton de nouveaux composants avec le texte: « Hé, je suis un composant » apparais, mais je reçois rien ou littéralement

<my-component></my-component> 

plunker: https://plnkr.co/edit/IQe8ln?p=preview

Answer 1

Vous êtes en train de réfléchir. Il suffit de mettre ngRepeat sur myComponent:

<my-component ng-repeat="c in components" text="c.text"></my-component> 

Et peut-être quelque chose comme ça dans JS:

angular.module("myApp", []) 
.controller("myCtrl", function ($scope,$compile) { 
    $scope.components = []; 

    $scope.addComponent = function(text) { 
     $scope.components.push({text: text}); 
    } 
}); 

function componentCtrl($scope) { 
    // something here 
} 

angular.module("myApp").component('myComponent', { 
    template: '<span>{{$ctrl.text}}</span>', 
    controller: componentCtrl, 
    bindings: { 
    text: '=' 
    } 
});