Angular Directive Template and Child Directive inclusion

Question

I'm developing a set of angular directives for driving a toolbar I am working on for a knowledge base app.

The problem I am having is getting my parent directive to process a child directive nested inside of it regarding the template on the parent directive.

I'm trying to have a concept like this,

-Toolbar ->Button Group ->->Button

So I have three directives

xyz-toolbar xyz-toolbar-button-group xyz-toolbar-button

The toolbar directive is restrict A, attribute only. The button group and button are Restrict E (elements only).

Each directive has independent scope, (I pass things around via controller linking in the directives.)

The problem though is I want to use a template in by Button Group Directive (inline) and have it include any Buttons.

For example, I have markup like this (this is the master template in asp.net MVC) and it's a partial view that get's loaded in the header where the toolbar will render.

<kb-toolbar>
    <kb-toolbar-button-group>
        <kb-toolbar-button kb-toggle="ng-class: Button.Toggled ? 'fa fa-2x fa-save': 'fa fa-2x fa-edit'" ng-attr-title="Button.Title">{{!Button.IsToggle ? Button.Text: ''}}</kb-toolbar-button>
    </kb-toolbar-button-group>
</kb-toolbar>

Now I have a kb-toolbar directive as such

    app.modules.main.directive("kbToolbar", function () {
    return {
        scope: {},
        restrict: 'A',
        link: function ($scope, element, attrs) {

        },
        controller: function ($scope) {
            var buttonGroups = new Array();
            this.addButtonGroup = function (buttonGroup) {
                buttonGroups.push(buttonGroup);
            }

            $scope.buttonGroups = buttonGroups;
        }
    }
});

and then the button group

    app.modules.main.directive("kbToolbarButtonGroup", function () {
    return {
        scope: {},
        restrict: 'E',
        replace: true,
        link: function ($scope, element, attrs) {
            console.log(element);
        },
        compile: function(element, attrs) {
            var content = element.children();
            console.log(content);
        },
        controller: function ($scope) {
            //TODO
        },
        template: '<ul class="nav navbar-nav">' +
            + '' + //I Don't know what to put in here, this is where the child directive needs to go
            '</ul>'
    };
});

and finally the button

    app.modules.main.directive("kbToolbarButton", function () {
    return {
        scope: {},
        restrict: 'E',
        replace: true,
        link: function ($scope, element, attrs) {

        },
        controller: function ($scope) {
            //TODO
        },
        template: '<li><a href="">SomeButtonCompiled</a></li>'
    }
});

So the basic problem is kb-toolbar-button-group renders the unordered list, but contains no children. So I need to add something to the template "" on that directive to cause it to include the kb-toolbar-button inside of it.

Answer 1

You could achieve this by using transclude inside kbToolbarButtonGroup directive so that will render the child content inside the element where you mention ng-transclude

Directive

app.modules.main.directive("kbToolbarButtonGroup", function () {
    return {
        scope: {},
        restrict: 'E',
        replace: true,
        transclude: true,
        link: function ($scope, element, attrs) {
            console.log(element);
        },
        compile: function(element, attrs) {
            var content = element.children();
            console.log(content);
        },
        controller: function ($scope) {
            //TODO
        },
        template: '<ul class="nav navbar-nav">' +
            + '<ng-transclude></ng-transclude>' //added transclude here that will load child template here
            +'</ul>'
    };
});