如何动态添加ng-click处理程序

我尝试在(动态)之前生成的按钮上添加ng-click,但效果不佳.此外,我已尝试在此论坛上找到的所有解决方案,没有人运作良好.

我的HTML代码:

    

        

            {{ content }}
        
    

    
    

我的AngularJS代码:

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $compile) {
  $scope.init = function() {
    var el = 'Start';
    var element = angular.element(document.querySelector('#play'));
    var generated = element.html(el);
    $compile(generated)($scope);
}
$scope.startAnimation = function(){
        console.log("click");
}
});

我的错误是"RangeError:超出最大调用堆栈大小",这是由$ compile(生成)($ scope)生成的; .从第一个问题派生出来的另一个问题是,如果我单击按钮,那么函数startAnimation将执行数百次.

请给我一个解决方案.哪里出错了.

问题出在这行代码中:

$compile(generated)($scope);

相反它应该是:

$compile(generated.contents())($scope);