Utilizzare una direttiva angolare all'interno di un'altra direttiva

Question

ho creato le direttive di seguito angolari, ChildDirective che viene utilizzato all'interno 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); 
    } 
} 

Questo è stato a lavorare normalmente e diverse direttive bambino è apparso.

ho voluto aggiornare il ParentDirective, per ottenere l'elenco dei childDirectives dal server. Quindi ho aggiornato il codice ParentDirective fare una chiamata ajax e quindi disegnare le 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); 
      }); 
     } 
    } 
} 
}); 

Il problema è che le childDirectives non compare più, anche se nel debeggur sta entrando al metodo di compilazione del childDirective

Answer 1

Devi collegare l'elemento compilato all'oscilloscopio. E dal momento che non stai più modificando l'elemento modello, devi aggiungere i nuovi elementi all'elemento collegato. Puoi farlo in questo modo:

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