Используйте угловую директиву внутри другой директивы

Question

Я создавшая ниже угловые директивы, ChildDirective, который используется внутри 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); 
    } 
} 

Это работает нормально, и появились несколько дочерних директив.

Я хотел обновить ParentDirective, чтобы получить список childDirectives с сервера. Поэтому я обновил ParentDirective код, чтобы сделать вызов Ajax и затем нарисуйте 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); 
      }); 
     } 
    } 
} 
}); 

Проблема заключается в том, что childDirectives не появляется больше, хотя в debeggur он входит в метод компиляции childDirective

Answer 1

Вы должны связать скомпилированный элемент с областью действия. И поскольку вы больше не изменяете элемент шаблона, вы должны добавлять новые элементы к связанному элементу. Вы можете сделать это следующим образом:

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