CODEWITHSUNDEEP
javascripthtmlangularjs
Kanza
Kanza

Reputation: 51

AngularJS: ng-click not working in ui-grid cellTemplate

Here I go again, with angular problems.

I have a grid in my HTML, which is just a line.

I'm copypasteing the controller.

app.controller('PanelController', function ($scope,  $compile, uiGridConstants){

    var actionTemplate = '<div class="ui-grid-cell-contents"><img class="addNotes" src="images/button/detail.gif" ng-click="dettaglio(row.entity)" /></div>';

    $scope.dettaglio = function(ritornoSearch, inspect) {
        console.log("make it function");
    };

    columnDefs: [
        { field: 'azioni', enableFiltering: false, width: 85, enableSorting: false, enableColumnMenu: false, cellTemplate: actionTemplate, displayName: 'Azioni'},
        { field: 'codeSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
        { field: 'nomeSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
        { field: 'cognSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
        { field: 'codeFiscaleSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
        { field: 'descStato' , headerCellClass: $scope.highlightFilteredHeader }
    ]
};

The question is: when I open it in my browser, the image doens't show up as clickable. If I try to click on it anyway, it doens't even provide me the console.log.

What am I missing?

Upvotes: 1

Views: 1667

Answers (1)

lin
lin

Reputation: 18392

Just do it like its documented in http://ui-grid.info/docs/#/tutorial/305_appScope and compare this runnable plnkr demo with your solution.

$scope.grid.appScope is available in all templates that the grid uses. In a template, you access the scope using grid.appScope property

In that way you need to change your template into the right syntax: ng-click="grid.appScope.dettaglio(row)":

 var actionTemplate = '<div class="ui-grid-cell-contents"><img class="addNotes" src="images/button/detail.gif" ng-click="grid.appScope.dettaglio(row)" /></div>';

AngularJS application example with ui-grid:

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$log', '$http', function ($scope, $log, $http) {

    $scope.dettaglio = function (row) {
        console.log(row);
        alert('inside');
    };

    $scope.gridOptions = {};

    $scope.gridOptions.columnDefs = [
        {name: 'name'},
        {name: 'gender'}, {
            name: 'ShowScope',
            cellTemplate: '<button class="btn primary" ng-click="grid.appScope.dettaglio(row)">Click Me</button>'
        }
    ];

    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json').success(function (data) {
        $scope.gridOptions.data = data;
    });

}]);

Upvotes: 3

Related Questions