Javascript Web客户端AngularJS多面板页面空白，但有内容
我试图使用Angular的Javascript Web客户端AngularJS多面板页面空白，但有内容,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我试图使用Angular的ng include指令在包含的页面中给出的一个很好的多面板示例 网页内容如下： <div id="ThisisthemainPage" ng-controller="Main_Working_Page_Controller" style="height:100%"> <style type="text/css"> /* neutralize pane formatting BEFORE loading UI Theme
ng include<div id="ThisisthemainPage" ng-controller="Main_Working_Page_Controller" style="height:100%">
<style type="text/css">
/* neutralize pane formatting BEFORE loading UI Theme */
.ui-layout-pane ,
.ui-layout-content {
background: none;
border: 0;
padding: 0;
overflow: hide; /* FD was: overflow: visible; */
}
p { margin: 1em 0; }
/* use !important to override UI theme styles */
.grey { background: #758 !important; } /* FD was: #999 */
.outline { /*border: 1px dashed #F00 !important;*/ }
.add-padding { padding: 3px !important; } /* FD was: 10px */
.no-padding { padding: 0 !important; }
.add-scrollbar { overflow: auto; }
.no-scrollbar { overflow: hidden; }
.allow-overflow { overflow: visible; }
.full-height { height: 100%; }
button { cursor: pointer; }
</style>
<div class="ui-layout-north ui-widget-content add-padding" style="text-align:center;vertical_align:middle">
<h3>Stationary - Contains Global Steering parameters ("From"/"To", District selection, etc.)</h3>
</div>
<div class="ui-layout-south ui-widget-content add-padding">
South
</div>
<div class="ui-layout-west no-scrollbar add-padding grey">
<div id="accordion-west">
<H4 style="background:black"><b><a href="#">Management</a></b></H4>
<div>
<!-- <ul class="treeView" style="padding-left: 10px;">-->
<ul style="padding-left: 10px;">
<li>Add Location</li>
<li>Alter Location</li>
<li>Add Tests Bundle</li>
<li>Alter Tests Bundle</li>
<li>Do other 5</li>
<li>Do other 6</li>
<li>Do other 7</li>
<li>Do other 8</li>
<li>Do other 9</li>
<li>Do other 10</li>
<li>Do other 11</li>
<li>Do other 12</li>
<li>Do other 13</li>
<li>Do other 14</li>
<li>Do other 15</li>
<li>Do other 16</li>
<li>Do other 17</li>
<li>Do other 18</li>
<li>Do other 19</li>
<li>Do other 20</li>
<li>Do other 21</li>
<li>Do other 22</li>
<li>Do other 23</li>
<li>Do other 24</li>
<li>Do other 25</li>
<li>...</li>
</ul>
</div>
<H4><b><a href="#">Queries</a></b></H4>
<div>
<ul class="collapsibleList" style="padding-left: 10px;">
<li>Samplings</li>
<ul class="collapsibleList">
<li>Get List of Planned Samplings</li>
<li>Get List of Executed Samplings</li>
</ul>
<li>Get List of Places (with filters)</li>
<li>Get List of Standards Overflow</li>
<li>...</li>
</ul>
</div>
<H4><b><a href="#">Data Entry</a></b></H4>
<div>
<ul class="collapsibleList" style="padding-left: 10px;">
<li>Enter Tests Results</li>
<li>Create new Sample</li>
<li>...</li>
</ul>
</div>
<H4><b><a href="#">Actions</a></b></H4>
<div>
<ul class="collapsibleList" style="padding-left: 10px;">
<li>Review Test Results</li>
<li>Create new Sampling Request</li>
<li>Cancel Sampling Request</li>
<li>...</li>
</ul>
</div>
<H4><b><a href="#">Forms</a></b></H4>
<div>
<ul class="collapsibleList" style="padding-left: 10px;">
<li>Create sampling Form</li>
<li>...</li>
</ul>
</div>
<H4><b><a href="#">Reports</a></b></H4>
<div>
<ul class="collapsibleList" style="padding-left: 10px;">
<li>Internal</li>
<ul>
<li>Plan vs. Performance</li>
<li>...</li>
</ul>
<li>Health Ministry</li>
<li>...</li>
</ul>
</div>
<H4><b><a href="#">Repository</a></b></H4>
<div>
Provides access to historical information (e.g. reports).
</div>
</div>
</div>
<div id="tabs-center" class="ui-layout-center no-scrollbar add-padding grey">
<!-- center Tabs layout -->
<UL class="ui-layout-north no-scrollbar allow-overflow">
<LI><a href="#tab-panel-center-1">(1) View Sampling Requests List</a></LI>
<LI><a href="#tab-panel-center-2">(2) Generate Report: Monthly Sampling Log</a></LI>
<LI><a href="#tab-panel-center-3">(3) Test Results Entry</a></LI>
</UL>
<div class="ui-layout-center ui-widget-content add-scrollbar" style="border-top: 0;">
<div id="tab-panel-center-1" class="outline">
<B>Example of menu at the left:</B>
<ul class="treeView">
<li>
Reports
<ul class="collapsibleList">
<li class="collapsibleListClosed" style="-ms-user-select: none;">
Sampling
<ul class="collapsibleList" style="display: none;">
<li class="collapsibleListClosed" style="-ms-user-select: none;">
Planned
<ul class="collapsibleList" style="display: none;">
<li style="-ms-user-select: none;">Automatically</li>
<li style="-ms-user-select: none;">Manually</li>
<li class="lastChild" style="-ms-user-select: none;">And cancelled</li>
</ul>
</li>
<li class="lastChild collapsibleListClosed" style="-ms-user-select: none;">
Executed
<ul class="collapsibleList" style="display: none;">
<li style="-ms-user-select: none;">Expanding/opening</li>
<li class="lastChild" style="-ms-user-select: none;">Collapsing/closing</li>
</ul>
</li>
</ul>
</li>
<li class="lastChild collapsibleListClosed" style="-ms-user-select: none;">
Overflows
<ul class="collapsibleList" style="display: none;">
<li class="collapsibleListClosed" style="-ms-user-select: none;">
Quimistry
<ul class="collapsibleList" style="display: none;">
<li style="-ms-user-select: none;">Automatically</li>
<li style="-ms-user-select: none;">Manually</li>
<li class="lastChild" style="-ms-user-select: none;">And cancelled</li>
</ul>
</li>
<li class="lastChild collapsibleListClosed" style="-ms-user-select: none;">
Biology
<ul class="collapsibleList" style="display: none;">
<li style="-ms-user-select: none;">Expanding/opening</li>
<li class="lastChild" style="-ms-user-select: none;">Collapsing/closing</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="tab-panel-center-2" class="no-padding no-scrollbar"
style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<!-- center Accordion layout -->
<div class="ui-layout-center no-scrollbar add-padding">
<div class="ui-widget-header add-padding" >
ACCORDION HEADER
</div>
<!-- <div class="ui-layout-content no-scrollbar"> -->
<div class="ui-layout-content scrollbar">
<div id="accordion-center">
<H3><a href="#">Management</a></H3>
<div>
<B>Accordion inside a layout-pane</B>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum condimentum neque a velit laoreet dapibus.
Etiam eleifend tempus pharetra.</p>
<p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>
<p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>
<p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>
</div>
<H3><a href="#">Data Queries</a></H3>
<div>
<p style="font-weight: bold;">Sed Non Urna</p>
<p>Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus.
Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit,
faucibus interdum tellus libero ac justo.</p>
<p>Vivamus non quam. In suscipit faucibus urna.</p>
</div>
<H3><a href="#">Data Entry</a></H3>
<div>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede.
</div>
<H3><a href="#">Reports</a></H3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Aenean lacinia mauris vel est.</p>
<p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
</div>
</div>
</div>
<!-- /center Accordion layout -->
</div>
<div id="tab-panel-center-3" class="outline">
Cras nec arcu sed nisi varius fermentum ut non nulla. Pellentesque ultricies condimentum nibh,
nec imperdiet felis laoreet sit amet.
</div>
</div>
<div class="ui-layout-south ui-state-disabled ui-widget-content ui-corner-bottom no-scrollbar add-padding">
Status indication, notifications, etc.
</div>
<!-- /center Tabs layout -->
</div>
</div>
您能告诉我您在html页面中的何处使用$scope.Initializa_页面吗？它是作为相关控制器中的最后一个命令调用的（请参阅上面的第二段源代码）。只想知道它在上面的第一段源代码中的何处调用。
MyApp.controller('Main_Working_Page_Controller' , ['$rootScope' , '$scope' , 'DB_Services' , function( $rootScope , $scope , DB_Services) {
$scope.Initializa_Page = function () {
// alias callback for convenience
resizePaneAccordions = $.layout.callbacks.resizePaneAccordions;
resizeTabLayout = $.layout.callbacks.resizeTabLayout;
// OUTER/PAGE LAYOUT
// pageLayout = $("body").layout({ // DO NOT use "var pageLayout" here
pageLayout = $("#ThisisthemainPage").layout({ // DO NOT use "var pageLayout" here
west__size: .15
, east__size: .0
, north__size: .1
, south__initClosed: true
, north__initClosed: false /* FD was true */
, west__onresize: resizePaneAccordions // west accordion a child of pane
, east__onresize: resizePaneAccordions // east accordion nested inside a tab-panel
});
// TABS IN CENTER-PANE
// create tabs before wrapper-layout so elems are correct size before creating layout
pageLayout.panes.center.tabs({
activate: resizeTabLayout // tab2-accordion is wrapped in a layout
});
// WRAPPER-LAYOUT FOR TABS/TAB-PANELS, INSIDE OUTER-CENTER PANE
pageLayout.panes.center.layout({
closable: false
, resizable: false
, spacing_open: 0
, center__onresize: resizeTabLayout // tabs/panels are wrapped with an inner-layout
});
// LAYOUT TO CONTAIN HEADER+ACCORDION, INSIDE A TAB, INSIDE OUTER-CENTER PANE
$("#tab-panel-center-2").layout({
center__onresize: resizePaneAccordions // accordion is inside center-pane
, resizeWithWindow: false // resizing is handled by callbacks to ensure the correct resizing sequence
, triggerEventsOnLoad: true // force resize of accordion when layout inits - ie, becomes visible 1st time
});
// TABS INSIDE EAST-PANE
// pageLayout.panes.east.tabs({
// activate: resizePaneAccordions // resize tab2-accordion when tab is activated
// });
// pageLayout.sizeContent("east"); // resize pane-content-elements after creating east-tabs
// INIT ALL ACCORDIONS - EVEN THOSE NOT VISIBLE
$("#accordion-west") .accordion({ heightStyle: "fill" });
$("#accordion-center") .accordion({ heightStyle: "fill" });
// THEME SWITCHER
addThemeSwitcher('#east-toolbar',{ top: '12px', right: '5px' });
// if a new theme is applied, it could change the height of some content,
// so call resizeAll to 'correct' any header/footer heights affected
// NOTE: this is only necessary because we are changing CSS *AFTER LOADING* using themeSwitcher
setTimeout( pageLayout.resizeAll, 2000 ); /* allow time for browser to re-render with new theme */
} ;
console.log("Calling Initializa_Page") ;
$scope.Initializa_Page() ;
}]) ;