AngularJS: Creating child directives to contain sections which are sub-parts of the parent directive

Question

I am using AngularJS with D3 to create some charts on page. There are different sections representing different kind of charts. In each section, there will be 2-3 charts which. All sections use the same controller but there is one directive for each section. Below is the basic structure of code:

    angular.module('main', [''])
    .config(function($routeProvider) {

        $routeProvider.when('/main-page', {templateUrl: 'main-page.html'})

    })

    .controller('mainController', function($scope) {

        $scope.chartData = { type: "Bar Chart", data: {} };

    })

    .directive('primarySection', function() {

        return {

            restrict: 'E',
            replace: true,
            scope: {
                chartData: '=';
            },
            templateUrl: 'directives/primary-section.html'

        };

    });

I want to create a directive for each type of chart which I put in a particular section. But I want it as the child of the section directives (ex: primarySection directive can have different child directives such as bar-chart, line-chart etc). If possible, I don't want the child directives to be on of 'main' app (on which the parent directive is defined), or in another language, use the 'mainController' (which the parent directives are using). I am not really familiar with the 'require' and 'controller' property of the directives, so I can't figure out how to structure this kind of directives.

So I basically want to structure the child directives (which will contain the charts of parent directive/section) as a separate unit of functionality which I can put under parent directive, and which can take data from the parent directive and return data back, too. But they should be logically 'under' the parent directives (data and scope wise).

Can you please help?

Answer 1

You don't need to have your child directives depends on your parent directive. I see two way of doing this :

• Transclusion : your parent directive wil be only a container and will include all that you put as child node this is te easiest yet the most basic and would need some copy/pasting if present on more than one page :

  .. other switches

• Generating the HTML in your parent directive. Basically you move the ng-repeat+ng-switch in your parent directive's link function to generate the HTML, then compile it with $compile and append it to your dom using to the element variable of link function. This imply that if you have a new kind of chart, you will need to update your parent directive.

As far as i red, you don't need real communication between your child and parent directives, the binding seems enough. If you need something more complex that really bind those directive, you will need to add the following element :

// parent directive
controller:(scope, element, attr){
    this.method1 = function(){...}
}

// child directive
require:'^^primarySection'
link:function(scope, element, attrs, primarySectionCtrl){
   ..some code
   primarySectionCtrl.method1();
   ..
}

For a complete working example, i suggest you to check angular-message sources. Asides from some dark things, you'll that it's basically follow what i just tell.