Angular 1.5 динамически добавляет компонент

У меня есть простое приложение, в котором есть компонент, который дает мне данные из параметра.

Я хочу добавить этот компонент несколько раз, когда пользователь нажимает кнопку, в настоящее время у меня есть это:

<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, так и без него, но я все еще не могу создать компонент после загрузки страницы, первый компонент загружается нормально.

Я ожидаю, что при нажатии на кнопку появляются новые компоненты с текстом: «Привет, я компонент», но вместо этого я не получаю либо ничего, либо буквально

<my-component></my-component>

плункер: https://plnkr.co/edit/IQe8ln?p=preview


javascript angularjs angular-components
person Gonzalo Hernandez    schedule 26.02.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы слишком много думаете. Просто поставьте 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: '='
  }
});
person dfsq    schedule 26.02.2017
comment
вы правы, иногда я заходил слишком далеко с angular. Спасибо! - person Gonzalo Hernandez; 26.02.2017