[英]How to write Angularjs nested transcludes
I'm trying to learn angular directives/transclusion to control the creation of some custom panels in my application. 我正在尝试学习角度指令/包含来控制我的应用程序中某些自定义面板的创建。 I'm going wrong somewhere with transcluded content which is not appearing in the html. 我在某个地方出现了错误的内容,但没有出现在html中。
I have the following html markup: 我有以下html标记:
<div panel-widget>
<!-- this transcluded content appears -->
<div panel-header></div>
<div panel-body>This content doesn't</div>
</div>
In my browser I can see the content after the panel-widget directive but not the content in the panel-body directive. 在我的浏览器中,我可以看到panel-widget指令之后的内容,但是看不到panel-body指令中的内容。 Here are my directives, pretty simple so far... 这是我的指令,到目前为止非常简单...
// -----------------------------------------------------------
// PANEL WIDGET DIRECTIVE
// -----------------------------------------------------------
angular.module('myApp.panel')
.directive('panelWidget', [ function() {
return {
template: '<div class="panel panel-default"><span ng-transclude></span</div>',
restrict: 'A',
transclude: true,
};
}]);
//-----------------------------------------------------------
//PANEL WIDGET DIRECTIVE
//-----------------------------------------------------------
angular.module('myApp.panel')
.directive('panelHeader', [ function() {
return {
template: '<div class="panel-heading"><h3 class="panel-title"><em>This appears</em></h3></div>',
restrict: 'A',
scope: {
headerObj: '='
}
};
}]);
// -----------------------------------------------------------
// PANEL WIDGET DIRECTIVE
// -----------------------------------------------------------
angular.module('myApp.panel')
.directive('panelBody', [ function() {
return {
template: '<div class="panel-body"><span ng-translude></span></div>',
restrict: 'A',
transclude: true,
scope: {
panelBodyObj: '='
}
};
}]);
Does anyone know why the nested ng-transclude isn't working? 有谁知道为什么嵌套ng-transclude无法正常工作? Possibly an issue with the scope? 范围可能有问题吗?
Thanks in advance! 提前致谢!
You have a simple typo: 您有一个简单的错字:
template: '<div class="panel-body"><span ng-translude></span></div>',
Replace ng-translude
with ng-transclude
. 更换ng-translude
与ng-transclude
。
http://plnkr.co/edit/iDiImVrhgP7ZJMa2YCz4?p=preview http://plnkr.co/edit/iDiImVrhgP7ZJMa2YCz4?p=preview
:-) :-)
您在panelBody指令中拼写了ng-transclude :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.