Question

我正在使用Angular UI-Grid来显示我的数据，我在同一网格中有一个Action列，它使用 cellTemplate 来呈现自定义Html。我正在使用bootstrap下拉按钮来显示我的操作。每个操作都有一个与之关联的ng-click事件。

但是，我无法调用与该操作相关的事件。

Angular Code：

 angular.module("app", ['ui.grid', 'ui.grid.pagination', 'ngSanitize'])
.controller("appController", function($scope, $sce) {
    $scope.data = [];

    Init();

    function Init() {
    for (var i = 0; i < 50; i++) {
    $scope.data.push({
    fullName: "Name" + i,
    age: i
    });
    }
}

$scope.onClick = function() {
    alert(1);
};

$scope.actionTemplate = function(grid, row) {
    var html = '<div class="btn-group">' +
    '<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' +
    'Actions <span class="caret"></span>' +
    '</button>' +
    '<ul class="dropdown-menu">';
    for (var i = 1; i <= 5; i++) {
    html += '<li><a href="#" ng-click="grid.appScope.onClick()">Action ' + i + '</a></li>';
    }
    html += '</ul></div>';
    return $sce.trustAsHtml(html);
};

$scope.gridOptions = {
        data: $scope.data,
        columnDefs: [{
        field: 'RowAction',
        displayName: "Actions",
        cellClass: "row-action",
        pinnedLeft: true,
        maxWidth: 70,
        enableColumnMenu: false,
        enableSorting: false,
        cellTemplate: "<div ng-bind-html=\"grid.appScope.actionTemplate(grid, row)\"></div>"
        }, {
        name: 'fullName',
        field: 'fullName'
        }, {
        name: 'age',
        field: 'age'
        }]
    };
});

以下是完整的plunker

我在google上搜索但没有找到任何带有bootstrap下拉按钮的示例。

我尝试了帖子https://stackoverflow.com/a/27624341/1260915中提到的解决方案，但没有运气。

请提前帮助并谢谢

Angular UI-Grid，包含cellTemplate中的引导操作下拉列表

0 个答案: