Angular UI 网格，通过模板将按钮添加到行单元格

Question

我得到了以下gridOptions.columnDefs

 $scope.generateReport = function(row) {
     alert("Test");
 };

 $scope.gridOptions.columnDefs = [
     { name: 'Action', 
       cellEditableCondition: false, 
       cellTemplate: '<button ng-click="grid.appScope.generateReport(row)"> 
                       Report 
                      </button>' 
     }];

它不工作，按钮显示但一旦点击它不调用该功能。我正在遵循他们的指南 Here，并且我正在使用 ui-grid - v3.0.0-RC.18。

我的 html 获得了以下信息。

        <div id="grid1"
             ui-grid="gridOptions"
             ui-grid-cellnav
             ui-grid-edit
             ui-grid-expandable
             ui-grid-exporter
             class="myGrid">
        </div>

我也尝试添加一个 external-scope 但没有什么不同..

有什么想法吗？

Answer 1

我的 ng-click 按钮在 ui-grid 行中看起来像这样。

ng-click="getExternalScopes().delete($event, row)

我的控制器注入了 $scope 并且第一行创建了对外部范围的引用（我相信）。

app.controller("MyController", function ($scope) {
$scope.$scope = $scope;

HTML是这样的，指的是外部作用域

<div ui-grid="gridOptions" class="someClass" external-scopes="$scope" ui-grid-selection ui-grid-resize-columns></div>

这是我的整个 cellTemplate 如果它有帮助...

<div class="ui-grid-cell-contents ng-binding ng-scope"><button class="btn btn-danger {{getExternalScopes().deleteButtonClass(row)}} btn-xs btn-block" ng-click="getExternalScopes().delete($event, row)"><span class="glyphicon glyphicon-trash"></span></button></div>

Angular UI 网格，通过模板将按钮添加到行单元格

Angular UI Grid, adding a button to a row cell via templating

angularjs

angular-ui-grid