Javascript Transclude和ng bind：如何呈现子指令？

最近，我在理解如何在AngularJS中动态更改指令的内容时遇到了一个问题

首先，在我的HTML中，我有一个包含子指令的父指令。有时，我想刷新父指令的内容，但我尝试注入的子指令不是由AngularJS初始化的。我做了一个简单的解释来解释我的问题：

使用$timeout更新内容时，指令未初始化：

$timeout(function(){
    html = '<child-dir>TIMEOUT</child-dir>'
    scope.content = $sce.trustAsHtml(html)
}, 2500)

$timeout（函数（）{
html='超时'
scope.content=$sce.trustAsHtml（html）
}, 2500)

我试着使用$compile（在其他问题上看到了这一点），但我没能使它正常工作。您能解释一下如何使$compile在这种环境下工作，以及如何正确地呈现我的

子目录吗

提前谢谢
 未编译child dir指令。在将该指令添加到DOM之前，应该使用作用域对其进行编译

var demo=angular.module（'demo'，[]）；
指令（'parentDir'，函数（$sce，$timeout，$compile）{
返回{
限制：'E'，
是的，
模板：“”，
链接：函数（作用域、元素、属性、控制器、transcludeFn）{
transcludeFn（函数（html）{
$timeout（函数（）{
html=u2;.reduce（html，函数（进位，domeElement）{
if（DOMELENT.outerHTML）{
返回进位+DOMELENT.outerHTML
}否则{
返运；
}
}, '')
scope.content=$sce.trustAsHtml（html）
})
})
var el=$compile（“超时”）（范围）；
element.parent（）.append（el）；
}
}});
指令（'childDir'，函数（$sce）{
返回{
限制：'E'，
是的，
模板：“子目录”
}}); 
未编译child dir指令。在将该指令添加到DOM之前，应该使用作用域对其进行编译

var demo=angular.module（'demo'，[]）；
指令（'parentDir'，函数（$sce，$timeout，$compile）{
返回{
限制：'E'，
是的，
模板：“”，
链接：函数（作用域、元素、属性、控制器、transcludeFn）{
transcludeFn（函数（html）{
$timeout（函数（）{
html=u2;.reduce（html，函数（进位，domeElement）{
if（DOMELENT.outerHTML）{
返回进位+DOMELENT.outerHTML
}否则{
返运；
}
}, '')
scope.content=$sce.trustAsHtml（html）
})
})
var el=$compile（“超时”）（范围）；
element.parent（）.append（el）；
}
}});
指令（'childDir'，函数（$sce）{
返回{
限制：'E'，
是的，
模板：“子目录”
}}); 
从您提供的代码片段来看，似乎您正试图自己处理转换

实际上，只要
tranclude
属性和
ng transclude
属性由您处理，您就不需要这样做

您可以优化指令定义以适应以下特征：

/* ... */
.directive('parentDir', function(){
   return {
     transclude: true,
     link: function(){ /* Any DOM manipulation logic if required */ },
     template: '<div ><h2>Parent Directive</h2><div ng-transcude></div></div>'
   };
})
.directive('childDir', function(){
   return {
     transclude: true,
     template: '<div ><h4>Child directive</h4><div ng-transclude></div></div>'
   };
});

将被放置在最终编译版本的
模板的
部分

从您提供的代码片段来看，似乎您正在尝试自己处理转换

实际上，只要
tranclude
属性和
ng transclude
属性由您处理，您就不需要这样做

您可以优化指令定义以适应以下特征：

/* ... */
.directive('parentDir', function(){
   return {
     transclude: true,
     link: function(){ /* Any DOM manipulation logic if required */ },
     template: '<div ><h2>Parent Directive</h2><div ng-transcude></div></div>'
   };
})
.directive('childDir', function(){
   return {
     transclude: true,
     template: '<div ><h4>Child directive</h4><div ng-transclude></div></div>'
   };
});

将被放置在最终编译版本的
模板的
部分

谢谢，这帮我解决了问题。我试图同时使用$sce和$compile，但由于您的示例，我注意到我在这里使用$sce是错误的。谢谢，这帮助我解决了我的问题。我试图同时使用$sce和$compile，但由于您的示例，我注意到我在这里使用$sce是错误的。感谢您的提示，我不知道这样做是有效的。我必须保留转换功能，因为在我的项目中，我需要对转换的内容进行修改，但在下一个指令中我会记住这一点！谢谢你的提示，我不知道这样做有效。我必须保留转换功能，因为在我的项目中，我需要对转换的内容进行修改，但在下一个指令中我会记住这一点！
<parent-dir>
   <child-dir></child-dir>
</parent-dir>