ng点击不工作jquery追加/如何指导动态标签

Question

首先,我真的无法理解使用指令的动态方式,如按钮提交后,然后追加特别div.

结果我使用jquery在angular中附加元素.我的问题是ng-click没有绑定附加元素

下面是我的元素控制器和绘图功能的代码

视图

<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 -->

角度控制器

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控制器之后使用指令正确地附加/前置元素

再一次我很抱歉是角色的新手.我尽力阅读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');
  };
 }
]);