I am having trouble returning the data from directive to controller. My directive is with isolated scope where i am using '=', as per documentation, to have 2 way data binding but somehow one way data binding is there but not 2 way. My changes to the data from directive are not pushed back to the controller. Some code snipts:
controller
========
$scope.ap1 = "1111";
$scope.ap2 = "1111";
html
=======
<d3-zones
ng-if="vzones"
zone-data="vzones"
ap1-data="ap1"
ap2-data="ap2">
</d3-zones>
directive
========
scope: {
zoneData: '=zoneData',
ap1Data: '=ap1Data',
ap2Data: '=ap2Data'
},
And later in the link function, i am updating these two values on a particular event like this:
scope.$apply(function() {
scope.ap1Data = somevalue;
scope.ap2Data = somevalue;
});
In my directive, I am using d3 to draw some rectangles. In ap1Data & ap2Data I wanted to return the IDs of two rectangles that has been just drawn out.
I dont know whats wrong going on here. Please let me know if you can figure it out.
Thanks, Kashif
The behavior is really weird. I actually created a small test code, very to the point, to test this issue. If I pass complex data type like array, json or object it works fine but somehow it doesn't work with primitive datatype like number, null or string. So what i did is, i have just replaced my two variables with one data object like:
controller
========
$scope.dataModel {
ap1: "1111"
ap2: "2222"
}
html
=======
<d3-zones
ng-if="vzones"
zone-data="vzones"
ap1-data="dataModel.ap1"
ap2-data="dataModel.ap2">
</d3-zones>
directive
========
scope: {
zoneData: '=zoneData',
ap1Data: '=ap1Data',
ap2Data: '=ap2Data'
},
And later in the link function, i am updating these two values on a particular event like this:
scope.$apply(function() {
scope.ap1Data = somevalue;
scope.ap2Data = somevalue;
});
and then passed this dataModel to the directive as given above. Now it works fine. Any change to this datModel is returned back to the controller.
Thank you guys for looking into it.