2

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.

||||||
  • Can you post the render function? Maybe recreate this in jsfiddle/plunkr/codepen? – jusopi Feb 5 '16 at 17:23
  • Not a direct answer to your question, but easiest fix is to assign your svg variable back to your scope: jsfiddle.net/cjbmj7cm/7 – Mark Feb 6 '16 at 15:27
  • @jusopi The Jsfiddle link is in the first sentence :) – Christoph Kralj Feb 6 '16 at 18:06
  • @Mark Thanks thats an easy fix! – Christoph Kralj Feb 6 '16 at 18:07
  • The problem is that i have to add all variables (a lot...)explicitly to the scope. I hope there is a way to make the whole directive somehow isolated. – Christoph Kralj Feb 6 '16 at 18:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.