Javascript 将字符串解析为DOM，单击“不工作”

我尝试在“#text”中创建n个按钮，在ng单击时使用do button（）。当我调用“loadButtons（n）”功能时，按钮会显示，但单击时不会发生任何事情。。。 测试按钮工作正常。。。 我认为这与从字符串到DOM的解析有关，但我不知道如何做得更好…：(

.html

试验

.js

$scope.button=函数（）{
控制台日志（“按钮”）；
};
//在#文本中加载n个按钮
$scope.loadButtons=函数（n）{
var-content=“”；
对于（变量i=0；i

您应该使用ng repeat指令，如下所示

<div id="test">
   <button 
       class="button button-full button-light" 
       ng-repeat="i in getNumber(maxButtons) track by $index"
       ng-click="testButton(i)"
       >
       {{i}}
   </button>
</div>

---

开始用角度思考：）

你应该用

ng repeat

来做这个。。。它将根据您的喜好多次向dom添加按钮使用angular从数据模型创建dom，不要为此使用jQuery。如果不使用

$compile

，则无法插入包含angular指令的html。有很多更简单的方法可以使用angular最佳实践来实现这一点谢谢，我是angular的新手…我想我会尝试使用ng repeat:D

$scope.button = function () {
    console.log("BUTTON");
};

//Load n buttons in #text
$scope.loadButtons = function (n) {
    var content = "";
    for (var i = 0; i < n; i++) {
        content = content.concat('<button class="button button-full button-light"' 
        +'ng-click="button();">' + i + '</button>');
    }
    $('#text').html(content);
}

<div id="test">
   <button 
       class="button button-full button-light" 
       ng-repeat="i in getNumber(maxButtons) track by $index"
       ng-click="testButton(i)"
       >
       {{i}}
   </button>
</div>

    $scope.maxButtons= 10;
    $scope.getNumber = function(num) {
       return new Array(num);   
    }
    $scope.testButton = function(val){
       console.log(val);
    }