使用 TYPESCRIPT 的 AngularJS UI 网格单元格模板答案

【问题标题】：AngularJS UI Grid cell template using TYPESCRIPT使用 TYPESCRIPT 的 AngularJS UI 网格单元格模板
【发布时间】：2017-04-27 17:41:39
【问题描述】：

在回答我的问题之前，请考虑一下我正在使用 AngularJS 1 和 TYPESCRIPT。

是否有人知道如何使用Angular UI Grid 将控制器函数绑定到单元格模板，就像在这个link 中询问的那样？

我遇到了非常相似的情况，我定义了包含按钮的自定义单元格模板并尝试将ng-click 指令绑定到控制器中的函数？

所以我只有这样的东西：

组件模板：

<div id="grid1" ui-grid="$ctrl.gridOptions" class="grid" external-scopes="ctrl"></div>

组件控制器（只是一些代码sn-ps）：

ctrl = this;

exampleFunction() {
    console.log("Example function called.");
}

actionsCellTemplate = 
            '<btn class="btn btn-default action-button" ng-click="getExternalScopes().exampleFunction()">' +
                '<i class="icon-blue"><b>...</b></i>' +
            '</btn>';

columnDefs: [ { displayName: '', field: 'actions', enableColumnMenu: false, cellTemplate: this.actionsCellTemplate } ]

我不会在浏览器控制台中收到任何错误。

【问题讨论】：

是exampleFunction() 的scope 的一部分吗？还是只是在控制器内部定义？另外，你试过ng-click="grid.appScope.exempleFunction()"吗？
我根本不使用范围。只需在控制器中编写我的字段和方法，然后使用 html 模板中的$ctrl. 语法访问它们 -> 效果很好。 grid.appScope.exempleFunction() 不起作用。

标签： angularjs angular-ui-grid

【解决方案1】：

自 RC 19 起，ui-grid 不再支持外部范围。 https://github.com/angular-ui/ui-grid/blob/master/CHANGELOG.md#breaking-changes

getExternalScopes() 函数被移除。请改用 grid.appScope。 external-scopes 属性被移除。使用 gridOptions.appScopeProvider 将 $scope.$parent 以外的值分配给 appScope

【讨论】：