使用jqGrid列格式化函数进行ng-click工作

Question

我正在构建一个AngularJS应用程序，我正在使用jqGrid显示建筑物列表。每行包含有关该建筑物的信息以及两个按钮。

• 编辑按钮链接到一个细节画面
• 删除按钮将会从后台数据库中删除建设。

我的目标是通过使用的jqGrid配置对象，其被传递到的jqGrid指令上formatter回调这些按钮添加到网格。

我遇到的问题是，我似乎无法获得ng-click绑定来调用我分配给它的函数。

我已经创建了一个显示我的问题的解决方案。 http://plnkr.co/edit/2UDdNjfwCLauhlw1z3oL?p=preview

如何获得此ng-click绑定按预期工作？

Answer 1

在AngularJS元素中注入的任何新元素，需要使用$compile服务进行编译。编译后的角度指令&作用域变量绑定将起作用。我建议你在loadComplete事件jqgrid上编译表格，因为这个事件事件在jqgrid完全获得渲染时调用，&也会用angular.extend代替，这将使得代码更具有角度可读性。寻呼机元素在追加DOM之前也应该经过编译循环。

指令（链接功能）

link: function(scope, element, attrs) { 
    scope.$watch('config', function(newValue) { 
     element.children().empty(); 
     var table = angular.element('<table id="' + newValue.id + '"></table>'); 
     element.append($compile(table)(scope)); 
     angular.extend(newValue, { 
      jsonReader: { 
       root: 'Rows', 
       page: 'Page', 
       total: 'Total', 
       records: 'Records', 
       repeatitems: false 
      }, 
      viewrecords: true, 
      rowNum: 15, 
      loadComplete: function() { 
       //compiling DOM after table load 
       $compile(angular.element('#' + newValue.id))(scope); 
      }, 
      rowList: [15, 30, 50], 
      altRows: true 
     }); 
     if (newValue.pager) { 
      var pager = angular.element('<div id="' + newValue.pager + '"></table>'); 
      element.append($compile(pager)(scope)); 
      angular.extend(newValue, { 
       pager: '#' + newValue.pager, 
       pagerpos: "center", 
       recordpos: "right", 
       pgbuttons: true, 
       pginput: true 
      }); 
     } 
     angular.element(table).jqGrid(newValue); 
    }); 
} 

Working Plunkr

希望能帮助您，还需要什么东西，你可以问我任何时候，谢谢。