Как вы можете отображать угловую директиву внутри другой директивы?

Question

Есть ли способ создать дочернюю директиву внутри родительской директивы и использовать следующий модальный атрибут (в дочерней директиве), который бы вставлял HTML из шаблона в модальный Bootstrap? Директива child будет включать атрибут вопроса и модальный атрибут с шаблоном.

This article не помогает, поскольку в этом случае мне нужны конкретные дочерние директивы с уникальными атрибутами, а именно вопрос и модальный атрибут.

HTML:

<learn-card title="Eligibility"> 
    <learn-item question="Who Can Purchase a meal plan" modal="/elegibility/HowDoISignup.html"></learn-item> 
    <learn-item question="How Do I sign up for a meal plan?" modal=""></learn-item> 
</learn-card> 

Директива:

В приведенном ниже примере я полагаю, мне нужно будет добавить загрузочные 4 модальности внутри моего шаблон кода и позволяет содержание изменить, когда вопрос будет нажат , Будет ли это проще, чем все модалы, добавленные на страницу раньше? Нужно ли мне каким-то образом скомпилировать HTML из этой директивы и объединить HTML из другой директивы?

angular.module('main').directive('learnCard', function($http, $compile){ 
return{ 

    compile: function(element, attrs){ 
     console.log(attrs); 
    }, 

    template: "<div class='col-sm-4'>"+ 
    "<div class='learn-card box-shadow'>" + 
     "<h3 class='text-center'>{{title}}</h2>" + 
     "<ul></ul>" + 
    "</div>" + 
    "</div>", 
    scope: { 
     title: '@title' 
    }, 
    link: function(scope, element, attrs){ 
      console.log(attrs); 
      element.compile.html(element); 
      element.bind(attrs.title, function(){ 
      }); 
    } 
} 
}); 

Здесь у меня есть все отдельные вопросы внутри родительской директивы. Выполнение этого самостоятельно не вызывает никаких вопросов.

angular.module('main').directive('learnItem', function(){ 
return{ 
    template: "<li data-toggle='modal' data-target='{{modalId}}'">{{question}}</li>", 
    scope: { 
     question: '@question' 
    }, 
    link: function(scope, element, attrs){ 
     alert('working'); 
     console.log($('learn-item')); 
    } 

} 
}); 

Answer 1

Первая проблема, имеющий угловую transclude в родительский тег (узнать-карты). Это было так же просто, как установка transclude:true в директиве. Добавление этого свойства позволило мне не назначать атрибут ng-transclude родительским узлам.

В моей другой директиве (узнать-пункт) Я был тогда в состоянии решить мою вторую проблему: Полевое содержимое файла в модальном Bootstrap при присвоении значения уникального атрибута «модальный»

обходной путь к этой проблеме было назначить контроллер дочерней директиве (учебный элемент), который включает функцию тайм-аута с угловым выражением. Внутри этой функции я назначил возврат метода HTTP. К сожалению, использование функции компиляции или функции ссылки не будет работать, потому что область будет установлена ​​в последнем элементе, означающем, что каждая модель будет включать один и тот же основной текст. Я предполагаю, что это из-за наследования scope. Использование $timeout добавило область действия к текущему объекту вместо каждого выражения.