php - ng click 不适用于 jquery append/how to directive dynamic tags

Question

首先，我真的无法理解/理解指令以动态方式使用，例如在按钮提交之后附加到特定的 div 中。

结果我使用 jquery 以 Angular 附加元素。我的问题是 ng-click 没有绑定(bind)附加元素

下面是我的 Controller 代码和元素的绘制函数

查看

<div class="box" ng-controller="addWorkOrder">
                <div class="box-header with-border">
                  New Work Load
                </div>
                <div class="box-body">
                  <div class="form-group">
                    <input class="form-control" id="add_wl" ng-model="addwo_title" placeholder="Add Work Load">
                  </div>
                  <div class="form-group" id="add_wl_div" style="display:none">
                    <button type="" class="btn bg-olive pull-right" ng-click="click_addwo()">Add</button>
                  </div>
                </div><!-- /.box-body -->
              </div><!-- /.box -->

Angular Controller

app.controller('addWorkOrder',['$scope','$rootScope','$http','$compile',function($scope,$rootScope,$http,$compile){
    $scope.$watch('project_id',function(){
            $scope.click_addwo = function(){
                $http.post(base_url+'ajax/add_workorder',{proj_id:$rootScope.project_id,wo_title:$scope.addwo_title})
                .then(function(response){
                    if(response.data.success == 0){
                        alert(response.data.msg);
                    }else{

                        draw_workorder({
                            wo_id : response.data.data,
                            wo_title : $scope.addwo_title
                        });
                        $scope.addwo_title = "";
                    }
                });
            }       
        });
}]);

最后我的函数 draw_workorder() 在提交按钮成功时被调用

function draw_workorder(data){
    // workorder card view
    l = '<tr data-id="'+ data.wo_id +'" style="display:none;">'+
            '<td style="width:30px"></td>'+
            '<td class="mailbox-name"><a href="read-mail.html" ng-click="wmodal('+ data.wo_id +')" data-toggle="modal" data-target="#myModal">'+ data.wo_title +'</a></td>'+
            '<td class="mailbox-subject"><span class="badge bg-red">pending</span></td>'+
            '<td class="mailbox-attachment"></td>'+
            '<td class="mailbox-date" data-livestamp="'+ new Date().toLocaleString() +'"></td>'+
        '</tr>'; 
    $(l).prependTo('#wo_container').fadeIn();
}

在非常感谢 http 服务 ins Controller 之后，任何人都可以教我如何使用指令正确地附加/前置元素

再次抱歉，我是 Angular 的新手。我尽力阅读 Angular Directive 文档，他们提供的其他示例似乎对我来说太复杂了。

Answer 1

你需要做的是让 Angular 知道你的元素实际上有指令。这可以通过使用 $compile 服务来实现，在这里，我简化了你的例子 jsfiddle

app.controller('addWorkOrder', ['$scope', '$rootScope', '$http', '$compile',
  function($scope, $rootScope, $http, $compile) {

  $scope.click_addwo = function() {
    l = '<button type="" ng-click="attachedFunct()">Click Me!</button>';
    $('#wo_container').append($compile(l)($scope));
  };

  // Function that will be used by dynamically added element.
  $scope.attachedFunct = function() {
    alert('Clicked attached function');
  };
 }
]);