динамически добавить другой компонент

Question

У меня есть компонент A (как контейнер), и я пытаюсь добавить динамически компоненты B при нажатии кнопки. (Я хочу иметь список компонентов B)

Следующая строка помогает мне добавить компонент Б (он работает отлично)

<div class="bclass" bDirective ></div> 

Но проблема в том, что я хочу сделать это, когда кнопка нажата. Поэтому я пробовал следующую функцию, но она не работает.

 $scope.addBComponent = function(){ 

      var temp = document.createElement('div'); 
      temp.innerHTML = '<div class="bclass" bDirective ></div>'; 
      document.getElementById("container").appendChild(temp); 
     }; 

Спасибо,

Позже изменения:

bDirective директива, которую я сделал, кто создает квадрат с некоторыми данными в нем. Нажав на кнопку добавления, я хочу добавить этот квадрат. Итак, моя проблема в том, как я могу установить одну директиву для динамически созданного div?

Answer 1

Вы нужно использовать $compile Service

var app = angular.module('my-app', [], function() {}) 
 

 
app.controller('AppController', function($scope, $compile) { 
 
    $scope.addBComponent = function() { 
 
    var temp = document.createElement('div'); 
 
    temp.innerHTML = '<div class="bclass" b-directive>dd</div>'; 
 
    document.getElementById("container").appendChild(temp); 
 
    $compile(temp)($scope); 
 
    }; 
 
}) 
 

 
app.directive('bDirective', function() { 
 
    return { 
 
    template: '<span>This is a test content</span>' 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="my-app" ng-controller="AppController"> 
 
    <button ng-click="addBComponent()">Add</button> 
 
    <div id="container"></div> 
 
</div>

Примечание: Вы не должны делать РОМ манипуляции, как это сделано в addBCompoment в контроллере, при необходимости следует перейти к директиве

Answer 2

Еще код HTML был бы полезен, но в любом случае.

Я предполагаю, что вы хотите добавить еще один элемент (компонент) ниже div на клик. Так как ваш код выглядит как угловой сценарий JS, я отвечаю на его угловой

<div class="bclass" bDirective ng-bind-html="divHtmlVar"></div> 
<button ng-click="addBComponent()">append</button> 

    $scope.divHtmlVar = '<div>test html</div>'; 
    $scope.addBComponent = function(){ 
     $scope.divHtmlVar = $scope.divHtmlVar + '<div>New div</div>'; 
    };