Templates do not support Angular directives (ng-click)

[eirenik]

The following does not work:

headerTemplate:  '<div><button ng-click="alert(1);">Alert</button>Name</div>',

The button renders, of course; but the ng-click does not run.

[PaulL1]

Did you look at the getExternalScopes tutorial (http://ui-grid.info/docs/#/tutorial/305_externalScopes), or the upgrade guide (http://ui-grid.info/docs/#/tutorial/099_upgrading_from_2)?

[eirenik]

Briefly. I'd converted some code that needed that change, but my old code didn't have any ng-click in it; and it felt like something that should "just work", since it was a basic Angular directive. I'll review those documents though and see if I can make it work.

[eirenik]

I think this is still a bug. I meant that literally ng-click="alert(1)" would not work. There is no scope there to decare; the plain JavaScript never runs in a headerTemplate or expandableRowTemplate. It does not seem like I should need to -- or have a way to -- declare "I want ng-click to work" in those contexts.

In a cellTemplate, if I put the following:

<div class=\"ui-grid-cell-contents\">{{COL_FIELD CUSTOM_FILTERS}}<button ng-click="alert(1)">Push</button></div>' 

And this also fails to run the ng-click code. I tried declaring an external scope and calling into that, just to see if that would work for some reason, but it also fails. I also tried making the element something other than a button, but that did not help.

From the text in the tutorial, it certainly seems like ng-click is supposed to work. I have tested this in Firefox and IE, both act the same. No error messages are generated. I am using Angular 1.3.3-build.3574+sha.e3764e3.

[PaulL1]

OK, so problem number 1 is probably that you're using angular 1.3. That isn't supported yet, there's a branch in which we're working on it but it's not finished.

[PaulL1]

I suspect a cause could be that the click event on the header is already being used to handle sorting - so perhaps the problem is that the event is being trapped and not propogated.

[jmaronge]

I am having the same issue and am using Angular 1.3.0. Does anyone know a work around for this?

[PaulL1]

There is a 1.3 branch that has many (but not all) features working. You could try using that I guess.

[jmaronge]

I tried this using Angular v1.2.27 and have the same issue. Could this be similar to issue #2109?

[PaulL1]

Likely similar in that it's likely the grid is capturing the click. Clicking on a column header causes it to sort. If you put an ng-click on the column header, would you expect the sort to still operate, or some other behaviour?

[jmaronge]

I should have also mentioned that it is not working for all the rows, not just the header. So in my situation I am trying to get a column of checkboxes, with one in the header to check all but without making any selections in the grid. Our checked items are different than the one that is selected.

For example, I have all the stuff in the header for that column turned off. I am expecting that they only event to fire here is the ng-click I have in the template.

        var checkboxCellTemplate =
            '<div class="ngSelectionCell">' +
                '<input tabindex="-1" ' +
                'class="ngSelectionCheckbox" ' +
                'type="checkbox" ' +
                'ng-click="getExternalScopes().setChecked(row)"' +
                ' />' + 
            '</div>';

        var cellHeaderTemplate = "<div>" +
            "<div class=\"ui-grid-vertical-bar\">&nbsp;</div>" +
                "<div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\">" +
                    '<input tabindex="-1" ' +
                    'class="ngSelectionCheckbox" ' +
                    'type="checkbox" ' +
                    'ng-click="getExternalScopes().setAllChecked()"' +
                    'ng-if=\"grid.options.enableSelectAll\"' +
                    ' />' +
                "</div>" +
            "</div>";

        columnDefs.push({
            name: 'checked',
            displayName: '',
            width: 20,
            headerCellTemplate: cellHeaderTemplate,
            cellTemplate: checkboxCellTemplate, ,
            pinned: true,
            sortable: false,
            enableSorting: false,
            enableFiltering: false,
            enableHiding: false
        });

So what I need to happen is that checking in the header, checks all the checkboxes in the column (this is done on the ng-click handler), and checking a checkbox on a row executes the ng-click so I can set my count of checked items. We have to show the users the number of checked items.

[PaulL1]

Tutorial 305 shows buttons within cells, which seems to work: http://ui-grid.info/docs/#/tutorial/303_customizing_column_menu. Have you loaded the editable feature perhaps?

For headers, I've pushed a change that only loads the click handler if your column is either sortable or has a column menu. If it has neither, then you can load your own ng-click handler, see this plunker for an example: http://plnkr.co/edit/YXwajWWqfiIcJnCBQj8k?p=preview

It looks to me like that also worked without my changes - i.e. the problem was that ng-click="alert(1);" wasn't a valid ng-click handler.

[jmaronge]

I have forked your plnkr to show you what i am trying to do

http://plnkr.co/edit/aEZS6FpcOcOGPfcqoBSs?p=preview

clicking on the row checkboxes should call setChecked and clicking on the header checkbox should call setAllChecked.

Am I doing something wrong. It is possible, I am new to ui-grid.

[PaulL1]

I think it's the way you're using getExternalScopes - you have to put the methods you want to call on the object that you put into the external-scope directive.

http://plnkr.co/edit/z0t2hdX9uSezW8gRKQOS?p=preview

[jmaronge]

Well don't I feel stupid now. 😥 Thanks for all your help