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?

Improve this question
14
  • Can you please show your html code ? how are you attching the actionTemplate to your html ? Commented May 16, 2017 at 9:13
  • Could you provide a plunkr? Also why do you have two arguments for dettaglio() function but then call it with one? Commented May 16, 2017 at 9:13
  • By the way your controller is missing ')' brace at the end Commented May 16, 2017 at 9:14
  • @RishabhJain You don't really have to attach that action, In my HTML there's <section ng-controller="PanelController as panel"> <div align="center"><br><br><br> <button id='toggleFiltering' ng-click="toggleFiltering()" class="btn btn-success">Nascondi Filtri</button><br><br> <div class="myGrid" ui-grid="gridOptions"></div> </div> </section> , You don't have to attach it cause you call it in gridOptions. Commented May 16, 2017 at 9:15
  • 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. =) Commented May 16, 2017 at 9:38

1 Answer 1

Reset to default
3

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

}]);
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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 please provide some feedback. Why doenst it work for you while its working fine in the plnkr demo? Have you checked the DEMO? 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?
Thank you very much, I found a solution and I posted it here so anyone can check it.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.