AngularJS ES6 ui-grid 指令范围，ng-click 不起作用

Question

我有一个带有 angularJS 和 ES6 的链式指令，我想使用 ui-grid。 网格显示了正确的列和数据，很好。

但是 ng-click 在 cellTemplate 中不起作用。什么都没发生。 我还尝试用 console.log(grid) 检查网格对象，但网格未定义。

谁可以使用cellTemplate来调用openDetail方法？

export default function ChainsDirective() {
    class ChainsDirective {

        /*@ngInject*/
        constructor(chainsService, $state) {
            this.chainsServiceLoadChains = chainsService.loadChains.bind(chainsService);
            this.gridOptions = {
                enableColumnMenus: false,
                columnDefs: [
                    {
                        name: 'id',
                        visible: false
                    },
                    {
                        name: 'name',
                        displayName: 'Kette',
                        cellTemplate: '<div class="ui-grid-cell-contents"><a onclick="console.log(grid)" ng-click="grid.appScope.openDetail(row.entity.id)">{{row.entity.name}}</a></div>'
                    }
                ]
            };
            this.$stateGo = $state.go.bind($state);
            this.fetch(); // best practice initiales laden in einer Funktion zu kapseln
        }

        /**
         * @param int chainId
         */
        openDetail(chainId) {
            this.$stateGo('chainDetail', {chainId})
        }

        fetch() {
            return this.chainsServiceLoadChains().then(data => {
                this.gridOptions.data = data;
            })
        }
    }

    return {
        restrict: 'E',
        template: '<div ui-grid="chains.gridOptions" external-scopes="$scope" class="grid"></div>',
        scope: {},
        bindToController: {},
        controller: ChainsDirective,
        controllerAs: 'chains'
    }
}

Answer 1

我从未使用过 ui-grid 指令。但似乎您需要通过名称访问您的控制器，因为您已经使用 "controller as" 语法声明了它。

因此，在您的 ng-click 中，您需要使用名称 chains:

来引用作用域上的控制器

ng-click="grid.appScope.chains.openDetail(row.entity.id)"