Question

我尝试在每行内创建Boostrap table并编辑和删除按钮。我创建了一个AngularJS控制器并使用AngularJS指令生成表。

使用过的库：

Bootstrap 3
Bootstrap Table
AngularJS

这是我的JS代码：

(function () {
    // angular applciation 
    var app = angular.module('micro-operacao-list-app', []);

    // angular directive to configure Bootstrap table via JS
    app.directive('initTable', function() {
        return {
            restrict: 'A',

            link: function(scope, el, attrs) {
                var opts = scope.$eval(attrs.initTable);

                el.bootstrapTable(opts);

            }

        };
    });

    // Table controller (configuration and actions)
    app.controller('GridController', function($scope, $http) {

        $scope.options = {
            method: 'get',
            url: Utils.getContext() + '/microoperacao/rest',
            queryParams: function(pageSize, pageNumber, searchText) {
                return {
                    start: pageSize * (pageNumber-1),
                    length: pageSize
                };
            },
            pagination: true,
            sidePagination: 'server',

            height: 'auto',
            striped: true,
            pageSize: 10,
            pageList: [10, 25, 50, 100],
            search: false,
            showColumns: true,
            columns: [{
                field: 'id',
                title: 'Código',
                align: 'right',
                valign: 'middle',
                width: 100,
                sortable: false
            }, {
                field: 'descricao',
                title: 'Descrição',
                align: 'left',
                valign: 'middle',
                sortable: false
            }, {
                title: 'Ações',
                width: 75,
                formatter: function(value, row, index) {

                    // //////////////////////////
                    // CREATION OF BUTTONS FOR EDIT AND DELETE RECORDS
                    // //////////////////////////

                    return '<a class="btn btn-default btn-xs" ng-click="list.btnEditarClick(' + row.id + ')"><span class="glyphicon glyphicon-pencil"></span></a>&nbsp; ' +
                    '<a class="btn btn-default btn-xs"><span class="glyphicon glyphicon-trash"></span></a>';
                }
            }]
        };

    });

    // controller for new and edit records
    app.controller('ListController', ['$window', function($window) {

        this.btnNovoClick = function() {
            $window.location.href = Utils.getContext() + '/microoperacao/novo';
        };

        this.btnEditarClick = function(id) {
            $window.location.href = Utils.getContext() + '/microoperacao/' + id;
        };

    }]);

})();

这是我的HTML：

<div class="container-fulid" ng-app="micro-operacao-list-app">
    <div ng-controller="ListController as list">
        <p>
            <a ng-click="list.btnNovoClick()" target="_self" class="btn btn-default btn-primary btn-sm"><span class="glyphicon glyphicon-plus"></span> Novo</a>
        </p>

        <div ng-controller="GridController as ctrl">
            <table init-table="options">
            </table>
        </div>
    </div>
</div>

这导致：

enter image description here

问题

每一行都有一个编辑按钮（见图），每个按钮都有

ng-click="list.btnEditClick({id})"

这是通过 GridController 生成的。

单击编辑按钮时，不会发生任何事情。似乎＆＃34; ng-click＆＃34;没有行动。

为什么呢？我做错了什么？

Answer 1

经过一番研究，我发现我需要重新编译＆＃34;我使用AngularJS表的dom，用于处理由加载数据进程生成的自定义格式元素。

以下是代码：

app.directive('initTable', ['$compile', function($compile) {
    return {
        restrict: 'A',

        link: function(scope, el, attrs) {
            var opts = scope.$eval(attrs.initTable);

            opts.onLoadSuccess = function() {
                $compile(el.contents())(scope); 
            };

            el.bootstrapTable(opts);
        }

    };
}]);

我注入 onLoadSuccess （引导程序表事件）以在表加载后触发dom的重新编译。

Answer 2

我有同样的问题，这是我的解决方案：

在bootstrap-table-angular.js外部文件中，我将$ compile参数添加到指令中，如：

W0328 08:00:53.755379  1 server.go:468] Failed to retrieve node info: nodes "ip-172-31-55-175" not found
W0328 08:00:53.755505  1 proxier.go:249] invalid nodeIP, initialize kube-proxy with 127.0.0.1 as nodeIP

然后，在Inside指令中，我添加了代码来在表完成加载时编译内容元素，如：

 angular.module('bsTable', [])
        .constant('uiBsTables', {bsTables: {}})
        .directive('bsTableControl', ['uiBsTables', '$compile', function (uiBsTables,$compile) { .... }

最后，在我的字符串html代码中，我在函数前添加了“$ parent”：

 $el.bind('post-body.bs.table', function() {
       $compile($el.contents())($s);
  });

这种变化对我来说已经足够了。我使用了下一个链接：bootstrap-table-angular尝试检查一下。

Answer 3

有些事似乎是错的。首先，您不需要将ng-click函数作为属性分配给list.btnEditClick（）之类的对象。其次，您应该将对象作为参数而不是id传递。

创建了一个小提琴：http://jsfiddle.net/zjU8A/

var app = angular.module('listApp',[]);

app.controller('ListCtrl',function($scope) {
   $scope.list = [{id:'92',desc:'Test1'},{id:'93',desc:'Test2'}];

   $scope.editListItem = function(item) {
       alert(item.desc);
   };
});

Bootstrap表和AngularJS（动态内容）

3 个答案: