CODEWITHSUNDEEP
angularjsangularjs-directive
Ghyath Serhal
Ghyath Serhal

Reputation: 7632

Use an angular directive inside another directive

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

Upvotes: 30

Views: 43638

Answers (1)

joakimbl
joakimbl

Reputation: 18081

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

Upvotes: 36

Related Questions