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

Answer 1

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);
            });
          }
        }
    }
}
});