I have a problem with multiple instances of the same directive on the same page like in the Jsfiddle example. Each directive has his own sort button and draws a small bar chart with d3. And this button should sort the corresponding directive. I would like to use the directive to show multiple barcharts on the same page, with different data sets.
The problem is that the sort button always sorts the last directive (no matter how many are there) and uses the data of his scope. All other charts stay the same. The scope seems to be isolated for the data but not for the function. I think I missed something with the scopes but I have no idea why the behaviour is like this. Any hints?
This is what the return of the directive looks like:
return {
restrict : "E",
transclude: true,
scope : {
"data" : "="
},
template : "<div><button ng-click='func()'>Sort</button></div>",
link: function (scope, element, attrs)
{
init(element, scope);
scope.func = function()
{
scope.data = scope.data.sort(function(a, b){return a-b});
render(scope);
}
}
}
The controller provides the data. The function func() sorts the data. I think the problem is around the render() function which is defined in the directive and not in the link: expression. But I am not sure.
svgvariable back to your scope: jsfiddle.net/cjbmj7cm/7 – Mark Feb 6 '16 at 15:27