javascript - 如何编写 Angularjs 嵌套嵌入

Question

我正在尝试学习 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 不起作用？范围可能有问题？

提前致谢!

Answer 1

你有一个简单的错字:

template: '<div class="panel-body"><span ng-translude></span></div>',

将 ng-translude 替换为 ng-transclude。

http://plnkr.co/edit/iDiImVrhgP7ZJMa2YCz4?p=preview

:-)