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);
                }
            };
        }
    };
});

动态创建的元素内部的指令不适用于angularjs

1 个答案: