Question

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

链接到详细信息屏幕的编辑按钮
删除按钮，用于从后端数据库中删除建筑物。

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

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

我创建了一个能够演示我的问题的plunker。 http://plnkr.co/edit/2UDdNjfwCLauhlw1z3oL?p=preview

如何让这个ng-click绑定按预期工作？

Answer 1

在AngularJS元素中注入的任何新元素，需要使用$compile服务进行编译。编辑角度指令＆amp;范围变量绑定将起作用。我建议你在loadComplete事件jqgrid上编译表，因为当jqgrid完全呈现时会调用此事件事件，＆amp;同时将$.extend替换为angular.extend，这会使代码在角度方面更具可读性。在将DOM附加到DOM之前，Pager元素也应该经历编译循环。

指令（链接功能）

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

希望这可以帮助你，仍然需要你随时可以问我的任何事情，谢谢。

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

1 个答案: