使 ng-click 与 jqGrid 列格式化程序功能一起使用
Making ng-click work with jqGrid column formatter function
我正在构建一个 AngularJS 应用程序,我在其中使用 jqGrid 来显示建筑物列表。每行包含有关该建筑物的信息以及两个按钮。
- 链接到详细信息屏幕的编辑按钮
- 一个删除按钮,可以从后端数据库中删除建筑物。
我的目标是通过使用 jqGrid 配置对象上的 formatter
回调将这些按钮添加到网格中,该对象被传递给 jqGrid 指令。
我遇到的问题是我似乎无法获得 ng-click
绑定来调用我分配给它的函数。
我创建了一个 plunker 来演示我的问题。
http://plnkr.co/edit/2UDdNjfwCLauhlw1z3oL?p=preview
如何让这个 ng-click
绑定按预期工作?
在AngularJS元素中注入的任何新元素,需要使用$compile
服务进行编译。编译 angular 指令和范围变量绑定后将起作用。我建议您在 jqgrid
的 loadComplete
事件上编译 table,因为此事件在 jqgrid
完全渲染时调用,并且还替换 $.extend
使用 angular.extend
这将使代码以 angular 的方式更具可读性。 Pager 元素在添加之前也应该经过编译周期 DOM.
指令(link函数)
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);
});
}
希望对你有所帮助,还有什么需要可以随时问我,谢谢。
我正在构建一个 AngularJS 应用程序,我在其中使用 jqGrid 来显示建筑物列表。每行包含有关该建筑物的信息以及两个按钮。
- 链接到详细信息屏幕的编辑按钮
- 一个删除按钮,可以从后端数据库中删除建筑物。
我的目标是通过使用 jqGrid 配置对象上的 formatter
回调将这些按钮添加到网格中,该对象被传递给 jqGrid 指令。
我遇到的问题是我似乎无法获得 ng-click
绑定来调用我分配给它的函数。
我创建了一个 plunker 来演示我的问题。 http://plnkr.co/edit/2UDdNjfwCLauhlw1z3oL?p=preview
如何让这个 ng-click
绑定按预期工作?
在AngularJS元素中注入的任何新元素,需要使用$compile
服务进行编译。编译 angular 指令和范围变量绑定后将起作用。我建议您在 jqgrid
的 loadComplete
事件上编译 table,因为此事件在 jqgrid
完全渲染时调用,并且还替换 $.extend
使用 angular.extend
这将使代码以 angular 的方式更具可读性。 Pager 元素在添加之前也应该经过编译周期 DOM.
指令(link函数)
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);
});
}
希望对你有所帮助,还有什么需要可以随时问我,谢谢。