动态创建的元素内的指令不与angularjs

Question

我试图改变一个文本输入['type =“text”]元素与附加按钮来更新它。但是，当我在其ng-click事件上附加一个函数（$ scope.commit_update）时，函数不会触发。

$scope.commit_update = function(id){ 
     console.log(id); 
} 
$scope.update = function($service_id){ 

    var current_text = document.getElementById($service_id).innerHTML; 
    if(/<[a-z][\s\S]*>/i.test(current_text) == false){ 
     var vars = $service_id.split('-'); 
     var node = '<div class="input-group" style="width:200px;"><span class="input-group-addon" style="cursor:pointer;" ng-click="commit_update('+vars[1]+')">Save</span><input type="text" class="form-control" value="'+current_text+'" style="width:200px;"></div>'; 
     document.getElementById($service_id).innerHTML = node; 
    } 

} 

Answer 1

对控制器中的DOM做任何操作都不是个好主意。为此，使用directive。

Angular不知道您尝试追加的动态HTML。要使ng-click正常工作，我们需要使用$compile服务将编译为动态HTML源。

下面是修改后的小提琴：

演示Fiddle

HTML

 <tbody> 
      <tr> 
       <td id="service-1" fess>Test</td> 
       <td> <a class="btn btn-primary btn-large" ng-click="update()"><i class="glyphicon glyphicon-pencil"></i></a> 
<a class="btn btn-primary btn-large"><i class="glyphicon glyphicon-trash"></i></a> 

       </td> 
      </tr> 
     </tbody> 

JS

fessmodule.directive('fess', function ($compile) { 
    return { 
     restrict: 'A', 
     link: function (scope, elm, attrs) { 
      scope.heyFess = function() { 
       console.log('k'); 
       var current_text = document.getElementById("service-1").innerHTML; 
       if (/<[a-z][\s\S]*>/i.test(current_text) == false) { 

        var node = '<div class="input-group" style="width:200px;" ><span class="input-group-addon" style="cursor:pointer;" ng-click=alertMe()>Save</span><input type="text" class="form-control" value="' + current_text + '" style="width:200px;"></input></div>'; 

        var e = angular.element(node); 
        $compile(e.contents())(scope); 
        elm.replaceWith(e); 
       } 
      }; 
     } 
    }; 
});