动态创建的元素中不使用angularjs的指令_Angularjs_Angularjs Directive

动态创建的元素中不使用angularjs的指令

angularjs

动态创建的元素中不使用angularjs的指令,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我正在尝试将文本更改为input['type=“text”]元素，并附加一个按钮用于更新它。但是，当我在其ng click事件上附加一个函数（$scope.commit\u update）时，该函数并没有启动 $scope.commit_update = function(id){ console.log(id); } $scope.update = function($service_id){ var current_text = document.getElementB

我正在尝试将文本更改为input['type=“text”]元素，并附加一个按钮用于更新它。但是，当我在其ng click事件上附加一个函数（$scope.commit\u 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;
    }

}

$scope.commit\u update=函数（id）{
console.log（id）；
}
$scope.update=函数（$service\u id）{
var current\u text=document.getElementById（$service\u id）.innerHTML；
if（//i.test（当前_文本）==false）{
var vars=$service_id.split（'-'）；
var节点='Save'；
document.getElementById（$service\u id）.innerHTML=node；
}
}

在控制器中对DOM进行任何操作都不是好主意。使用

指令

Angular不知道您尝试附加的动态HTML。要使

ng单击

工作，我们需要使用

$compile

服务编译动态HTML源代码

这是你修改过的小提琴：

演示

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>


测验

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

fessmodule.directive（'fess'，function（$compile）{
返回{
限制：“A”，
链接：功能（范围、elm、属性）{
scope.heyFess=函数（）{
console.log（'k'）；
var current_text=document.getElementById（“service-1”）.innerHTML；
if（//i.test（当前_文本）==false）{
var节点='Save'；
var e=角度元素（节点）；
$compile（即contents（））（范围）；
elm.替换为（e）；
}
};
}
};
});