Angular 1.5 动态添加组件

Question

我有一个简单的应用程序，其中有一个组件可以通过参数为我提供数据。

我想在用户点击按钮时多次添加这个组件，目前我有这个：

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

和我的 .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
});

我尝试了使用和不使用 $compile，但在页面加载后我仍然无法创建组件，第一个组件加载正常。

我期望的是，当单击按钮时，会出现带有文本的新组件："Hey I'm a component"，但我什么也得不到，或者字面意思是

<my-component></my-component>

笨蛋：https://plnkr.co/edit/IQe8ln?p=preview

Answer 1

你想多了。只需将 ngRepeat 放在 myComponent 上：

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

也许在 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: '='
  }
});

Angular 1.5 动态添加组件

Angular 1.5 add component dynamically

javascript

angularjs

angular-components