1
我試圖學習角度指令/ transclusion來控制我的應用程序中一些自定義面板的創建。我在某處出現了錯誤的內容，而這些內容並未出現在html中。如何編寫Angularjs嵌套transcludes
我有以下的HTML標記：
<div panel-widget>
<!-- this transcluded content appears -->
<div panel-header></div>
<div panel-body>This content doesn't</div>
</div>
在我的瀏覽器，我可以看到在面板的小部件的指令後的內容，但不是在面板體指令的內容。這裏是我的指令，很簡單迄今...
// -----------------------------------------------------------
// 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不工作？可能是範圍問題？
在此先感謝！
我只是複製它在plunker，我可以看到的內容HTTP：// plnkr。 co/edit/xP1TS60CiYIorejDbX2w？p =預覽 – Raulucco
奇怪。另外，我可以在你的plunker代碼中看到「This appear」已從標題中消失，但「dsdsdsds」字符串在那裏，但是header指令不會將transclude設置爲true。我認爲在這種情況下它會覆蓋「dsdsdsds」字符串？ – CSharp