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

Question

有没有办法可以在父指令中创建一个子指令，并使用以下模式属性（在子指令中），它会将HTML从模板插入到Bootstrap模式中？子指令将包含问题属性和模板的模态属性。

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>

指令：

在下面的示例中，我假设我需要在模板代码中添加bootstrap 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

第一个问题是将Angular转换为父标记（学习卡）。这就像在指令中设置 var indexes = []; $('#<%=txtCaregiverHelper.ClientID%> :selected').each(function(i, selected){ indexes[i] = $(selected).val(); }); $('#<%=Label286.ClientID%>').html(indexes.join(" ")); 一样简单。添加此属性允许我不将transclude:true属性分配给父节点。

在我的另一个指令（学习项目）中，我能够解决我的第二个问题：在为唯一属性“modal”赋值时将文件内容设置为Bootstrap模式

此问题的解决方法是将控制器分配给子指令（learn-item），其中包含Angular超时函数。在这个函数里面，我分配了HTTP方法的返回。不幸的是，使用编译函数或链接函数将无法工作，因为范围将设置在最后一项上，这意味着每个模型都包含相同的正文文本。我认为这是因为ng-transclude的继承。使用scope将范围添加到当前对象而不是每个表达式。

$timeout