Angular JS ui-grid cellTemplate's ng-click not firing when scope function tries to pass the cell info as params

Question

I can't seem to get ng-click to fire for me and I've been trying for hours. I've read a bunch of similar issues on SO, but none seem to fix my issue. Note that if I change ng-click to onclick the event fires.

My JS:

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

app.controller('matterController', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {

    var industryFields,
        departmentFields,
        regionFields;

    $scope.gridOptions = {
        enableFiltering: true,
        enableColumnResizing: true,
        enableSorting: true,
        columnDefs: [
            { name: 'Client_Name', width: 120, enableHiding: false },
            { name: 'Client_Number', width: 140, enableHiding: false },
            { name: 'Matter_Name', width: 130, enableHiding: false },
            { name: 'Matter_Number', width: 140, enableHiding: false },
            { name: 'Billing_Partner', width: 250, enableHiding: false },
            { name: 'Matter_Descriptions', width: 180, enableHiding: false
, cellTemplate: '<div class="ui-grid-cell-contents"><a ng-href="#" ng-click="displayDescription(\'{{COL_FIELD}}\');">View Description</a></div>' },
            { name: 'Industries', width: 120, enableHiding: false },
            { name: 'Departments', width: 130, enableHiding: false },
            { name: 'Regions', width: 120, enableHiding: false }
        ],
        showGroupPanel: true
    };

    function loadData() {
        $http.get('api/ClientMatter/')
        .success(function (data) {
            $scope.gridOptions.data = data;
        });

        $http.get('Home/GetIndustries')
        .success(function (data) {
            industryFields = data;
        });

        $http.get('Home/GetDepartments')
        .success(function (data) {
            departmentFields = data;
        });

        $http.get('Home/GetRegions')
        .success(function (data) {
            regionFields = data;
        });
    }

    $scope.displayDescription = function(data) {
        alert(data);
    }

    loadData();
}]);

The "Matter_Descriptions" column has a custom cell template which needs to call the "displayDescription" method. So far I can't get it to fire at all.

My HTML:

<div class="screen-container" ng-controller="matterController">
    <button onclick="location.href = '@Url.Action("Create", "Home")'; return false;" style="float: right;">New Matter</button>
    <br/><br/>
    <div id="home-grid" ui-grid="gridOptions" class="grid" ui-grid-move-columns ui-grid-resize-columns></div>
</div>

And here is a screen shot of the hyperlink at runtime showing the data exactly as I want it:

Pretty basic. Any help is appreciated! Thanks!

Sorry, the HTML got cut out of my post. I added it back. Thanks — BrianLegg
– BrianLegg, Commented Apr 4, 2016 at 20:11
Try removing # from your href. It takes precedence over ng-click in Angular. — Tricky12
– Tricky12, Commented Apr 4, 2016 at 20:14

Jenna Leaf · Accepted Answer · 2017-04-13 13:47:02Z

3

You DO NOT NEED BRACES because you are inside ng already when you apply ng-directive's:

<button ng-click = 'yourscopefn(yourscopevars,,)'>buttonface</button>

you don't do this :

<button ng-click = 'yourscopefn({{yourscopevars}},,)'>buttonface</button>

wrong!!

All you need to do for your ui-grid column def celltemplate is:

{ name: 'yourcolumn', cellTemplate: 
' <a ng-href="#" ng-click="grid.appScope.yourfunction(COL_FIELD);">{{COL_FIELD}}</a>' }

edited Apr 13, 2017 at 13:47

answered Apr 11, 2017 at 16:52

Jenna Leaf

2,51026 silver badges31 bronze badges

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

1 Comment

BrianLegg Over a year ago

Just over a year since I posted but I agree with your answer. Marked accepted.

Community · Accepted Answer · 2017-05-23 11:54:12Z

1

I found the solution thanks to this post on SO: Button click does not work in Celltemplate angular grid

It turns out I needed to change:

ng-click="displayDescription(\'{{COL_FIELD}}\');

To:

ng-click=\'grid.appScope.displayDescription("{{COL_FIELD}}");

I couldn't tell you why this works, but my application is now working as expected. Thanks to those who commented.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 4, 2016 at 20:46

BrianLegg

1,7003 gold badges21 silver badges40 bronze badges

1 Comment

Jenna Leaf Over a year ago

Brian. That doesn't work for me. I have posted another answer which works for me.

Collectives™ on Stack Overflow

Angular JS ui-grid cellTemplate's ng-click not firing when scope function tries to pass the cell info as params

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related