1

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?

lin
  • 17,956
  • 4
  • 59
  • 83
Kanza
  • 51
  • 7
  • Can you please show your html code ? how are you attching the actionTemplate to your html ? – Rishabh Jain May 16 '17 at 09:13
  • Could you provide a plunkr? Also why do you have two arguments for dettaglio() function but then call it with one? – Olezt May 16 '17 at 09:13
  • By the way your controller is missing ')' brace at the end – Rishabh Jain May 16 '17 at 09:14
  • @RishabhJain You don't really have to attach that action, In my HTML there's `





    ` , You don't have to attach it cause you call it in gridOptions.     – Kanza May 16 '17 at 09:15
  • @RishabhJain My controller is not missing, I just copypasted only what's required for this question. – Kanza May 16 '17 at 09:17
  • @Olezt Probably that's really the problem. I'm going to check it now. – Kanza May 16 '17 at 09:17
  • @Olezt Tried to write it properly with `on-click="dettaglio(row.entity,true)"` still doesn't even write in my console. – Kanza May 16 '17 at 09:20
  • @Kanza you are crating html dynamicaly, so angular does not know about the new compiled html, you need to write a directive that would compile dynamic html please refer to this link http://stackoverflow.com/questions/19267979/ng-click-not-working-from-dynamically-generated-html and http://stackoverflow.com/questions/11771513/angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs – Rishabh Jain May 16 '17 at 09:21
  • @RishabhJain Ah, I see. Gonna read it all and try, then I'll give you feedback! Thank you! – Kanza May 16 '17 at 09:26
  • @RishabhJain thats not correct. Please read the ui-grid docuemtation carefully. ui-grid provides an own compile logic so there is no need for an other compile. – lin May 16 '17 at 09:34
  • @lin if the library provides its own compilation logic, then I completely agree that you don't need your own directive, I was just giving a generic answer to this type of issues . – Rishabh Jain May 16 '17 at 09:36
  • 1
    @RishabhJain yea, by reading it the first time it seems like you are right. But by reading the question carefully it turns out that it is a problem depended on `ui-grid`. =) – lin May 16 '17 at 09:38
  • @lin No, it doesn't. – Kanza May 16 '17 at 15:21
  • @Kanza please check my answer. It should solve your problem `... the image doens't show up as clickable`, Please give some feedback. Thank you m8. Please check the plnkr i provided, it shows you how to solve the problem in the right way. – lin May 18 '17 at 10:29

1 Answers1

2

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;
    });

}]);
lin
  • 17,956
  • 4
  • 59
  • 83
  • Well, sadly it doesn't work. In my console it says "Error: [$parse:syntax] Syntax Error: Token '(' is not a valid identifier at column 15 of the expression [grid.appScope.(row.entity)] starting at [(row.entity)]." – Kanza May 16 '17 at 09:25
  • @Kanza please provide some feedback. Why doenst it work for you while its working fine in the plnkr demo? Have you checked the DEMO? http://plnkr.co/edit/9O5zkIf3CNDQDI5wQl21?p=preview Please compare it with your codes. I realy think the problem is related an your side now. The solution should work. Please add some more information so I can help you to fix this problem. We could also join a CHAT-Room if you like to? – lin May 16 '17 at 15:29
  • Thank you very much, I found a solution and I posted it here so anyone can check it. – Kanza May 16 '17 at 15:32