score:1

Accepted answer

as oledje mentioned, you declared the angularapp.directives twice, but there was also an issue with how you are actually referencing the data for the charts in the directive code. i would recommended that you create an isolated scope for each directive and map the properties for the chart data in the scope definition.

so instead of

  .directive('drawpiechart', function () {

    return function (scope, element, attrs) {

        var container = $(element).attr("id");
        scope.$watch('data', function () {
            console.log('data');
            drawplot();
        }, true);

        var drawplot = function () {...};
     };
  }

you should do

  .directive('drawpiechart', function () {

    return {
       restrict: 'e',
       scope: {
           chartdata: "="
       },
       link: function (scope, element, attrs) {

         scope.$watch('chartdata', function (newval,oldval) {
             if (newval) {
                  drawplot();
             }
         }, true);
         var drawplot = function () {
             // use scope.chartdata for the data
         };
       }
    };
  }

and then you also need the corresponding html

<draw-pie-chart chart-data="piechartdata">

and in your controller do $scope.piechartdata=[];

here is a jsfiddle with all of my changes: http://jsfiddle.net/callado4/9far5/5/ (look at the history to see how i progressed)

score:1

i think that your problem is that you declare a module twice.

try write not

angular.module('angularapp.directives', []).
directive('drawpiechart'...)

angular.module('angularapp.directives', []).
directive('drawbarchart'...)

but

angular.module('angularapp.directives', []).
directive('drawpiechart'...).
directive('drawbarchart'...)

or

var app = angular.module('angularapp.directives', []);
app.controller('ctrl', ...)
app.directive('drawpiechart'...);
app.directive('drawbarchart'...);

examples:

http://jsfiddle.net/gdq6b/2/

http://jsfiddle.net/eyz9u/1/


Related Query

More Query from same tag