AngularJS使用$compile后ng-click仍无法触发的问题解决

你遇到的核心问题是：动态生成的HTML没有经过Angular的编译处理，导致里面的ng-click指令无法和控制器的$scope绑定。

修复步骤 #

直接修改你createGroupForm函数里的DOM插入代码即可：

原来的代码是把原始HTML字符串插入DOM：

$("#user-group-list").prepend(html);

改成插入经过$compile编译后的元素：

$("#user-group-list").prepend($html);

修改后的完整控制器代码 #

angular.module('myApp').controller("authorityController",['$compile','$scope','$http','$log','$cookies',function ($compile,$scope,$http,$log,$cookies) { 
  $scope.groupName = ""; 
  $scope.createGroupForm = function($event){ 
    // 移除不必要的ng-repeat，因为你是新增单个表单
    var html = '<div class="box box-solid">' + 
               '<div class="box-body">' + 
               '<input ng-model="groupName" class="pull-left" placeholder="please type in the group name"/>' + 
               '<span class="pull-right">' + 
               '<button ng-click="createGroup()" class="btn btn-danger pull-right btn-block btn-sm">Ok</button>' + 
               '</span>' + 
               '</div>' + 
               '</div>'; 
    var $html = $compile(html)($scope); 
    $("#user-group-list").prepend($html); // 插入编译后的元素
  }; 
  $scope.createGroup = function(){ 
    $log.log($scope.groupName); 
  }; 
}]);

原因解释 #

1. AngularJS的指令（比如ng-click、ng-model）需要经过编译阶段才能和$scope建立绑定关系。
2. 你已经用$compile(html)($scope)生成了绑定好$scope的DOM元素，但之前错误地插入了原始的HTML字符串——浏览器只会把它当成普通静态HTML渲染，不会触发Angular的指令解析。
3. 另外你原来的HTML里加了ng-repeat="groupInfo in groupInfoList"，但这里是新增单个表单，这个循环完全多余，反而可能引发不必要的问题，所以建议移除。

这样修改后，点击"ok"按钮就能正常调用createGroup函数，控制台也会打印输入的群组名称了。

内容的提问来源于stack exchange，提问作者Danni Chen