Use an angular directive inside another directive

Question

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

var wizardModule = angular.         


        

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