ng 单击不适用于 jquery append / How to 指令动态标记


ng click not working on jquery append / how to directive dynamic tags

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

结果,我在 Angular 的附加元素中使用了 jQuery。 我的问题是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 指令文档,似乎他们给出的其他示例对我来说非常复杂。

你需要做的是让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');
  };
 }
]);

您的 ng-click 不起作用,因为您需要在将 html 附加到某个元素之前对其进行编译。

var $compile = ...; // injected into your code
var scope = ...;
var parent = ...; // DOM element where the compiled template can be appended
var html = '<div ng-bind="exp"></div>';
// Step 1: parse HTML into DOM element
var template = angular.element(html);
// Step 2: compile the template
var linkFn = $compile(template);
// Step 3: link the compiled template with the scope.
var element = linkFn(scope);
// Step 4: Append to DOM (optional)
parent.appendChild(element);

欲了解更多信息,请访问此链接