如何在另一个指令中呈现Angular指令？

Question

Is there a way that I can create a child directive inside of a parent directive and use the following modal attribute (in the child directive) which would insert HTML from a template into a Bootstrap modal? The child directive would include a question attribute and a modal attribute with the template.

This article does not help because, in this instance, I need specific child directives with unique attributes, namely the question and modal attribute.

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>

Directive:

In the below example I assume I will need to add the bootstrap 4 modal inside of my template code and allow the content to change when a question is clicked. Would this be easier than having all modals added to the page before hand? Do I need to somehow compile the HTML from this directive and concatenate the HTML from the other directive?

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

Here I have all of the individual questions inside of the parent directive. Running this independently does not render any questions.

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

The first problem is having Angular transclude into the parent tag (learn-card). This was as easy as setting transclude:true in the directive. Adding this property allowed me not to assign the ng-transclude attribute to parent nodes.

In my other directive (learn-item) I was then able to solve my second issue: setting the contents of a file into a Bootstrap modal when assigning a value to the unique attribute "modal"

The workaround to this problem was to assign a controller to the child directive (learn-item) which includes an Angular timeout function. Inside of this function, I assigned the return of the HTTP method. Unfortunately, using the compile function or link function would not work because scope would be set on the last item meaning that every model would include the same body text. I assume this is because of the inheritance of scope . Using $timeout added the scope to the current object instead of every expression.

return{ 
    template:'<li><a href="" data-toggle="modal" data-target="#{{id}}">    {{question}}</a></li>' + modal, 
    scope: {
            question: '@question',
            id: '@dataid',
            modal: '@modal',
    },
    controller: ['$scope', function($scope){
        $timeout(function(){
            var modal = $scope.modal; 
            if ( modal !== undefined){
                $http.get('/pages/faq/'+modal).then(function(response){
                    $scope.data = response.data;                     
                });
            }

        });

    }]

}