Angular 1.5 Komponente dynamisch hinzufügen

Question

Ich habe eine einfache APP, wo ich eine Komponente habe, die mir Daten von einem Parameter gibt.

Ich möchte diese Komponente mehrmals hinzufügen, wenn ein Benutzer auf eine Schaltfläche klickt, zur Zeit habe ich dies:

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

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

habe ich versucht, sowohl mit als auch ohne $ Kompilieren, aber ich kann die Komponente immer noch nicht erstellen, nachdem die Seite geladen wurde, die erste Komponente wird geladen.

Was ich erwarte, ist, dass, wenn die Schaltfläche neue Komponenten mit dem Text klicken: „Hey, ich bin eine Komponente“ erscheinen, sondern bekomme ich entweder nichts oder buchstäblich

<my-component></my-component> 

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

Answer 1

Sie überdenken. Einfach ngRepeat auf myComponent:

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

Und vielleicht so etwas wie dies in 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: '=' 
    } 
});