Use an angular directive inside another directive

Question

I have created the below angular directives, ChildDirective that is used inside ParentDirective

var wizardModule = angular.module('Wizard', []);

wizardModule.directive('childDirective', function ($http, $templateCache, $compile, $parse) {
return {
    restrict: 'E',
    scope: [],
    compile: function (iElement, iAttrs, transclude) {
        iElement.append('child directive<br />');
    }
}
})

wizardModule.directive('parentDirective', function ($http, $compile) {
return {
    restrict: 'E',
    compile: function (element, attrs) {
        var x = '<child-directive></child-directive><child-directive></child-directive>';
        element.append(x);
    }
}

This was working normally and several child directives appeared.

I wanted to update the ParentDirective, to get the list of childDirectives from the server. Hence I updated the ParentDirective code to do an ajax call and then draw the ChildDirectives

var elem;
wizardModule.directive('parentDirective', function ($http, $compile) {
return {
    restrict: 'E',
    compile: function (element, attrs) {
        var controllerurl = attrs.controllerurl;
        elem = element;

        if (controllerurl) {
            $http.get(controllerurl + '/GetWizardItems').
            success(function (data, status, headers, config) {
                var x = '<child-directive></child-directive><child-directive></child-directive>';
                elem.append(x);
                $compile(x);
            });
        }
    }
}
});

The problem is that the childDirectives does not appear any more, although in the debeggur it is entering to the compile method of the childDirective

Solution

You have to link the compiled element to the scope. And since you're no longer modifying the template element you should append the new elements to the linked element. YOu can do it like this:

var elem;
wizardModule.directive('parentDirective', function ($http, $compile) {
return {
    restrict: 'E',
    compile: function (element, attrs) {
        var controllerurl = attrs.controllerurl;
        elem = element;

        if (controllerurl) {
          return function(scope,element){
            $http.get(controllerurl + '/GetWizardItems').
            success(function (data, status, headers, config) {
                var x = angular.element('<child-directive></child-directive><child-directive></child-directive>');
                element.append(x);
                $compile(x)(scope);
            });
          }
        }
    }
}
});

Comments

[Ghyath Serhal]

Thank you for your help. I tried it, but unfortunately it did not work.

[joakimbl]

I've made a small correction, think it should work var x = angular.element('<child-directive></child-directive><child-d‌​irective></child-dir‌​ective>');

[Ghyath Serhal]

angular.element(), solved the problem. and there is no need to link it to the scope. so $compile(x) is enough. Coooool

[joakimbl]

This particular directive (child-directive) has no link function, no controller and no bindings in the template so it'll "work", but you really should link it to a scope

[Anonymous]

+1 : lifesaving answer!!! if i only could i would give 100 points for this answer! thanks! it works perfectly :)

[GeeWhizBang]

Where is scope coming from?