Question

我有一个componentA（就像一个容器），我尝试做的是在按下按钮时动态添加B组件。（我想要一个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

无论如何，更多的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>'; 
  };

Answer 2

您需要使用$compile服务

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那样进行dom操作，如果可能，它应该转到指令

动态添加另一个组件

2 个答案: