Question

我是angularjs的新手，我有点击“按钮”的代码。一个新行插入一个新按钮＆＃39;现在轮流按下“新按钮＆＃39;也应该有ng-click事件。问题是，当我尝试这样做时，添加了带有新按钮的动态行，但是新按钮没有附加到它的click事件。经过一些研究后，我发现在使用angularjs的＆＃34; $ compile＆＃34; 服务的帮助添加到DOM之前，我应该编译元素字符串。但随后浏览器抛出错误说＆＃39; $编译器不是函数＆＃39; ...请帮助。谢谢..！！以下是代码片段 jsp页面代码

    <td>
        <button type="button" id="clickButton" data-ng-click="insert()"
              class="btn btn-sm btn-default">
                <i class="fa fa-plus fa-lg"></i>
       </button>
   </td>

angularjs控制器代码

$scope.insert = function($compile){
          var tableRow ="<tr data-ng-repeat='c in ctrl.client.clientOwnerVOList' id='insertionRow"+count+"'>"+ 
                "<td>"+i+"</td>"+
                "<td class='col-lg-3'><input type='Text' class='form-control' data-ng-model='c.clientOwnerName' name='clientOwnerName{{$index + 1}}' id='Name'></td>"+
                "<td class='col-lg-4'><input type='Email' class='form-control' data-ng-model='c.clientOwnerEmail' name='clientOwnerEmail{{$index + 1}}' id='Email'></td>"+
                "<td class='col-lg-3'><input type='Text' class='form-control' data-ng-model='c.clientOwnerPhone' name='clientOwnerPhone{{$index + 1}}' id='PhoneNo'></td>"+
                "<td><button type='button' data-ng-click=insert() class='btn btn-sm btn-default'><i class='fa fa-plus fa-lg'></i></button></td>"+
                "<td><button type='button' class='btn btn-sm btn-default'  onClick=$(this).closest('tr').remove();><i class='fa fa-trash fa-lg '></i></button></td>"+
                "</tr>";
              var newTableRow = $compile(tableRow)($scope);
              $("#insertionRow").append(newTableRow);
              i++;
          };

Answer 1

为什么要将$ compile作为函数参数传递？您应该在注入$ scope时注入$ compile服务，即在您的控制器/指令中。

这可能是原因，它抛出$ compile不是函数错误。

Answer 2

您可以创建使用compile的指令：

 app.directive('dynamic', [ '$compile',
 function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, ele, attrs) {
            scope.$watch(attrs.dynamic, function (html) {
                ele.html(html);
                $compile(ele.contents())(scope);
            });
        }
    };
}]);

然后在你的html：

<div dynamic="tableRow"></div>

...无论您希望表格行显示在哪里。

data-ng-click事件绑定到DOM

2 个答案: