Как динамически вставлять и удалять одно вложенные угловые пользовательские директивы?

Question

Я относительно новичок в создании пользовательских угловых директив, и я пытаюсь заменить страницу в своем приложении, которая представляет собой ряд компонентов JQuery, которые вставляются внутри друг друга.

Я хочу создать набор пользовательских угловых директив, которые я могу вложить друг в друга, позволяя пользователю создавать своего рода форму, позволяя им удалять и повторно добавлять любые директивы, вложенные друг в друга если им нужно.

Я не уверен, как динамически вставлять одну директиву в другую, основываясь на выборе пользователя, и как установить это в директиве, чтобы можно было удалить, повторно добавить и перекомпилировать дочерний файл данной директивы.

До сих пор единственный (неисчерпаемый) метод, с которым я столкнулся, состоит в двухстороннем связывании с атрибутом в области выделения директивы, и таким образом определить внутреннее содержание директивы, но при изменении этого атрибута объект в родительском пространстве, DOM директивы не перекомпилируется, поэтому я убежден, что есть намного лучший способ сделать это.

Я предполагаю, что мне, возможно, потребуется использовать переход или функцию связи, так что любое руководство по этому поводу очень ценится!

Текущая попытка:

app.directive("testCustomMapperThings", function($compile) { 
    var testTemplate1 = '<div>THIS IS FIRST THE DYNAMICALLY COMPILED TEST TEMPLATE 1</div>'; 
    var testTemplate2 = '<div>THIS IS SECOND THE DYNAMICALLY COMPILED TEST TEMPLATE 2</div>'; 

    var getTemplate = function(contentType) { 
     var template = ''; 

     switch(contentType) { 
      case 'testTemplate1': 
       template = testTemplate1; 
       break; 
      case 'testTemplate2': 
       template = testTemplate2; 
       break; 
     } 

     return template; 
    }; 

    var linker = function(scope, element, attrs) { 

     //reads the scope's content attribute (2 way bound to this directive's isolate scope) and sets as DOM 
     element.html(getTemplate(scope.content.testContent)).show(); 

     //compiles the 2 way bound DOM, recompiles directive on changes to attributes. todo: CHECK DIRECTIVE RECOMPILES ON CHANGES TO ATTRIBUTES 
     $compile(element.contents())(scope); 
    }; 

    return { 
     restrict: "E", //can only be an element 
     link: linker, //link function 
     scope: { //isolate scope, 2 way bind to a 'content' attribute 
      content:'=' 
     } 
    }; 

}); 

Использование этой директивы в DOM, где я попытался изменить объект $ scope.content, но внутреннее содержание этой директивы не перекомпилировать:

<test-custom-mapper-things content="testContent"></test-custom-mapper-things> 
    <button ng-click="changeContent()">Click to change the test content and see if DOM recompiles</button> 

Контроллер для родительской области директивы:

$scope.testContent = { 
    testContent : "testTemplate1" 
}; 

$scope.changeContent = function() { 

    if($scope.testContent.testContent == 'testTemplate1') { 
    $scope.testContent.testContent = 'testTemplate2'; 
    } else { 
    $scope.testContent.testContent = 'testTemplate1'; 
    } 
}; 

Answer 1

Использовать $compile обслуживание и сфера. $ Watch метод.

Пример:

Javascript:

angular.module('dynamicTemplate',[]) 
    .directive("testCustomMapperThings",['$compile',function($compile) { 

    return { 
     resctrict: 'AE', 
     scope: { 
      active: '=' 
     }, 
     link: function (scope, el, attrs, ctrl) { 
      var t1 = "<div>I'm 1st Template</div>", 
       t2 = "<div>I'm 2nd Template</div>", 
       newTemplate; 
      function loadTemplate() { 
      el.html(''); 

      switch(scope.active) { 
       case 'template1': 
       newTemplate = t1; 
       break; 
       case 'template2': 
       newTemplate = t2; 
       break; 
      } 
      el.append($compile(newTemplate)(scope)); 
      } 

      loadTemplate(); 
      scope.$watch('active', function(newVal, oldVal){ 
      if(newVal === oldVal) return; 
       loadTemplate(); 
      }); 
     } 

    } 
}]) 
.controller('templateController', function() { 
    var vm = this; 
    vm.option = true; 
    vm.templateOption = vm.option? 'template1' : 'template2'; 

    vm.change = function() { 
    vm.option = !vm.option; 
    vm.templateOption = vm.option? 'template1' : 'template2'; 
    } 
}); 

HTML

<div ng-app="dynamicTemplate"> 
    <div ng-controller="templateController as t"> 
    <button ng-click="t.change()"></button> 
    <test-custom-mapper-things active="t.templateOption"></test-custom-mapper-things> 

    </div> 
</div> 

Codepen: http://codepen.io/gpincheiraa/pen/vLOXGz