ng-click in cellTemplate does not work

[pbackx]

I'm trying to add a clickable button in a cell template. However, something is interfering and it looks like the click is not propagated to the right handler.

I've created an example so that you can try it out: http://plnkr.co/edit/nGBEFmi0iOWZxMh0EnYN

The important part of the code is here:

$scope.click = function() {
  alert("clicked");
}

$scope.colDefs = [{
  field: "Name",
  displayName: "Name with Click",
  cellTemplate: '<a ng-click="click()" href="#">Click me</a>'
}];

Clicking on the link does not trigger the "click" function. I have a feeling this is related to the click handler that is already present, but can't quite figure out how to fix this. If possible.

Can some one point me in the right direction?

[diosney]

Hi, thanks for using this directive :)

The real issue here is that cellTemplate is not aware of the outer controller the directive is applied.

This is so the inner compile directive, which is the responsible for compile the cellTemplate option uses an isolated scope inside the outer treeGrid scope.

See the related issue at https://github.com/khan4019/tree-grid-directive/issues/37

Sadly, I hasn't started to work on this by now since I've another projects to attend to, but in a couple of days I surelly will add this feature.

However, if you want to add this feature by yourself, you will be more than welcome :smile:

[pbackx]

And thank you for contributing! :)

I think I understand the problem, but I'm not sure if I'm expert enough at Angular directives to solve this.

What would be the best place to fix this? In the link function of the treeGrid directive?

[ciggic]

would you please fix this issue. I am using your grid not able to provide update button on each row.

[warrenjyoung]

Look at this example. Let me know if this works for you. http://plnkr.co/edit/eAvrsyNRxA4MsfRFYfZz

I use the treeControl to get access to the controller. I have also used something like myTreeControl.scope = this; to pass in my complete controller scope. Then when I call the method i just use ng-click="myTreeControl.scope.methodName(branch)". If you place the event directly on the myTreeControl object make sure you don't use the same name as exsiting functions in the directive. it is good to use something like myTreeControl.scope.click = function().... or myTreeControl.scope = this;

Let me know if this helps. Thanks

[ciggic]

Many thanks for your replay. This will definitely work for me. I will try this.Thank you so much.

[pauloafons]

warrenjyoung, you are a genius, man.

Great work around!!!

[diosney]

Using @warrenjyoung workaround (thanks!) I added a new accompanying variable to cellTemplate, to be used when passing down scoped method to the cell template.

That way one can pass variables to the cell template without having to worry for variable overwriting.

As I added in the README file:

...you can pass the reference to cellTemplate as:

cellTemplateScope: {
    click: function(data) {         // this works too: $scope.someMethod;
        console.log(data);
    }
}

and then use it in cellTemplate as:

cellTemplate: "<img ng-click="cellTemplateScope.click(row.branch[col.field])" ng-src="{{ row.branch[col.field] }}" />",

and will work as expected.

[diosney]

If you have any issues with the changes just open a new issue and I will check it :smile:

[ImranAppdev]

warrenjyoung,

Your reply saved me lot of time. Was struggling to get custom template click event.

Thanks a lot.