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

Question

我正在尝试将文本更改为 input['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工作，我们需要使用service编译动态 HTML 源代码。$compile

这是您修改后的小提琴：

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