AngularJS ES6 ui-grid directive scope, ng-click dont work

Question

I have a chain directive with angularJS and ES6 and want to use ui-grid. The grid is shown with the correct columns and data, thats fine.

But ng-click don´t work in the cellTemplate. Nothing happens. Also i try to check the grid object with console.log(grid) and grid is undefined.

Who can i use the cellTemplate to call the openDetail method?

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'
    }
}

Stefan · Accepted Answer · 2015-10-21 08:56:16Z

3

I've never used ui-grid directive. But it seems that you need to access your controller by its name, since you have declared it with the "controller as" syntax.

So in your ng-click you need to reference the controller on the scope with its name chains:

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

edited Oct 21, 2015 at 8:56

answered Oct 21, 2015 at 7:01

Stefan

14.9k4 gold badges59 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS ES6 ui-grid directive scope, ng-click dont work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related