Angular networking problem with directive in cellTemplate
I hit my head! This seems like a pretty simple problem ... I am using the ui-grid angular control and I am trying to use a custom directive in a cellTemplate. I can successfully get it there, but the problem is that I cannot bind the directive correctly. I can bind properties, but not functions from the parent. When I try to access the parent function that was bound, I get an error not defined by the object.
As far as I know, I am setting up the binding template and cells correctly:
//in columndefs:
{
name: 'item', displayName: 'Status',
width: 200, cellTemplate: '<dropdowncss item="row.entity[col.field]" do-drop="dropdowncombo"></dropdowncss>'
},
//directive declaration:
app.directive('dropdowncss', function () {
return {
restrict: 'E',
scope:
{
item: '=',
doDrop: '&'
},
controller: 'DropDownCSSCtrl',
templateUrl: 'dropdowncss.html'
};
When you click on one of the colored drops, it should alert "success", Please see a simple plunker here:
http://plnkr.co/edit/HuuxxgV1GoWzfWlUvafw?p=preview
Any help would be greatly appreciated. Thank!
source to share
So, from the scope that the cellTemplate is compiled, you are many miles in scope and your function dropdowncombo
does not exist. This is why you are getting undefined. From this area, your dropdowncombo function is actually $parent.$parent.$parent.$parent.$parent.$parent.dropdowncombo
. Now I would never suggest that you use this, so you have to design an alternative way to pass the scoped function to you from this cell template.
To see your plunger working, change line 20 of your app.js to
width: 200, cellTemplate: '<dropdowncss item="row.entity[col.field]" do-drop="$parent.$parent.$parent.$parent.$parent.$parent.dropdowncombo"></dropdowncss>'
I'll do the editing for you, but it's too awkward to have the same number of parents even in this modern age of adoption.
So, there are several ways to fix this, but here's my take. Save the scoped function you want to execute in the column definition and then call it with col.colDef.func
The updated column definition in app.js looks like this:
{
name: 'item', displayName: 'Status',
handleClick: $scope.dropdowncombo,
width: 200,
cellTemplate: '<dropdowncss item="row.entity[col.field]" do-drop="col.colDef.handleClick"></dropdowncss>'
}
Here's the edited working plunger
source to share
This question is old, but I have a better approach - you can use grid.appScope to access the current $ scope. so change line 20 in app.js to -
width: 200, cellTemplate: '<dropdowncss item="row.entity[col.field]" do-drop="grid.appScope.dropdowncombo"></dropdowncss>'
works Plunker here - http://plnkr.co/edit/5LiETuG2PEOJhvEcFypF?p=preview
source to share
In case anyone else was curious, I also found a method using events. $ emit can be used to broadcast an event across the entire parent hierarchy. So it worked:
Adding this to the parent area:
$scope.$on('EventDropDown', function () {
alert('passed up the event successfully');
});
And calling it from a directive like this:
<div class="divDropDown" ng-click="$emit('EventDropDown')">
This correctly passed it to the parent. Unlike $ emit, $ broadcast broadcasts events down the scope hierarchy (not applicable in this scenario). There is no other connection to things other than the event name. This makes it convenient.
source to share