我正在尝试学习 Angular Directive(指令)/嵌入来控制在我的应用程序中创建一些自定义面板。我在某个地方出错了，其中包含的内容没有出现在 html 中。
我有以下 html 标记:
<div panel-widget>
<!-- this transcluded content appears -->
<div panel-header></div>
<div panel-body>This content doesn't</div>
</div>
在我的浏览器中，我可以看到 panel-widget 指令之后的内容，但看不到 panel-body 指令中的内容。这是我的指令，到目前为止非常简单......
// -----------------------------------------------------------
// 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: '='
}
};
}]);
有谁知道为什么嵌套的 ng-transclude 不起作用？范围可能有问题？
提前致谢!
最佳答案
你有一个简单的错字:
template: '<div class="panel-body"><span ng-translude></span></div>',
将 ng-translude 替换为 ng-transclude。
http://plnkr.co/edit/iDiImVrhgP7ZJMa2YCz4?p=preview
:-)
关于javascript - 如何编写 Angularjs 嵌套嵌入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30353347/