0

我正在使用带有 Intel App 框架的 Angular js 作为前端。我在 angular module 中定义了一些视图/路线。当我运行 app 时，默认视图会正确加载。但是，当我单击任何链接导航到任何其他路线时，内容会加载到
ng-view 中。但是，面板没有正确呈现页眉、页脚和内容通过英特尔应用程序框架。

我发现新加载的面板具有样式“显示：无”（出现空白屏幕）。我正在寻找一种在我的应用程序中将应用程序框架与 Angular 集成的正确方法。这是一些示例代码。

角度路线配置：

var routes = function($routeProvider) {
    $routeProvider
        .when('/healthcheck',
              {
                  controller : 'HealthCheckController',
                  templateUrl : 'html/healthCheck.html'
              })
        .when('/healthcheck/system',
              {
                  controller : 'SystemHealthCheckController',
                  templateUrl : 'html/healthCheck/systemHealth.html'                      
              })           
        .otherwise({redirectTo : '/healthcheck'});
};

视图 1：

    <div id="afui"> <!-- this is the main container div.  This way, you can have only part of your app use UI -->
<!-- this is the header div at the top -->
<div id="header">
</div>
<div id="content">
<!-- here is where you can add your panels -->

     <div class="upage panel" id="mainpage" data-header="home-header" data-footer = "none">
        <div class="upage-outer">
         <header class="container-group inner-element uib_w_1" data-uib="app_framework/header" data-ver="0" id="home-header">
          <h1>{{ pageTitle }}</h1>
          <div class="widget-container wrapping-col single-centered"></div>
          <div class="widget-container content-area horiz-area wrapping-col left"></div>
          <div class="widget-container content-area horiz-area wrapping-col right"></div>
             <a href="javascript:$.ui.toggleLeftSideMenu()" class="button" style="float:right"> {{ headerButtonText }}</a>
         </header>
         <div class="upage-content" id="mainsub">
              <div class="formGroupHead">Services</div>
               <p> The following Health Check services are available. </p>
                <div class ="divider"></div>
          <div class="grid urow uib_row_1 row-height-1" data-uib="layout/row" data-ver="0">
           <div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0">
            <div class="widget-container content-area vertical-col">

             <ul class="list inset widget d-margins" data-uib="app_framework/listview" data-ver="0">
              <li data-ng-repeat = "healthCheckType in healthCheckTypes.healthCheckTypes" 
                   class="widget uib_w_3" data-uib="app_framework/listitem" data-ver="0">
                  {{ healthCheckType.view }}
                  <a ng-href="#{{ healthCheckType.view }}" data-transition="fade"> <h4>{{ healthCheckType.name }}</h4></a>
                  <p> Checks the status of system</p></p>
              </li>         
             </ul><span class="uib_shim"></span>
            </div>
           </div>
           <span class="uib_shim"></span>
          </div>
         </div>
         <!-- /upage-content -->

        </div>
        <!-- /upage-outer -->
   </div> <!-- /upage-panel -->
</div>  <!-- /content -->

<!-- bottom navbar. Add additional tabs here -->
<div id="navbar">
<div class="horzRule"></div>
<a href="#main" id='navbar_home' class='icon home'>home</a>
</div>
<!-- this is the default left side nav menu.  If you do not want any, do not include these -->
<nav>
    <div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0">
         <div class="widget-container content-area vertical-col">

    <ul class="list widget uib_w_5 d-margins" data-uib="app_framework/listview" data-ver="0">
           <li class="widget uib_w_6" data-uib="app_framework/listitem" data-ver="0" id="favorites-btn"><a class="icon heart">Health Check                      </a>
           </li>
           <li class="widget uib_w_7" data-uib="app_framework/listitem" data-ver="0" id="messages-btn">
               <a class="icon chat">Jira</a>
           </li>
           <li class="widget uib_w_8" data-uib="app_framework/listitem" data-ver="0" id="profile-btn">
               <a class="icon user">Build Services</a>
           </li>
          </ul><span class="uib_shim"></span>             
        </div>
    </div>
</nav>
</div>

视图 2：

<div id="afui"> <!-- this is the main container div.  This way, you can have only part of your app use UI -->
<!-- this is the header div at the top -->
<div id="header">
</div>
<div id="content">    
      <div class="upage panel"  id="mainpage2" data-header="af-header-1">
        <div class="upage-outer">
          <header class="container-group inner-element uib_w_1" data-uib="app_framework/header" data-ver="1" id="af-header-1">
            <h1> Health Check </h1>
            <div class="widget-container wrapping-col single-centered"></div>
            <div class="widget-container content-area horiz-area wrapping-col left"></div>
            <div class="widget-container content-area horiz-area wrapping-col right"></div>
          </header>
          <div class="upage-content" id="mainsub">
              <h1> Helo World</h1> {{ t }}
            <div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row" data-ver="0">
              <div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0">
                <div class="widget-container content-area vertical-col">

                  <ul class="list widget uib_w_2 d-margins" data-uib="app_framework/listview" data-ver="1">
                    <li data-ng-repeat = "service in services"
                        class="widget uib_w_3" data-uib="app_framework/listitem" data-ver="1">
                        <h3><a> {{ service.title }}</a></h3>
                        <p>{{ service.subTitle }}</p>
                    </li>            
                  </ul>
                    </div>
                 <!-- <div class="uib-justgage gauge no_wrap widget uib_w_6" data-uib="widgets/justgage" data-ver="0" id="uib-justgage-0" data-gauge="{'title':'Gauge','value':50,'min':0,'max':100,'hideMinMax':0,'hideValue':0,'hideInnerShadow':1}"></div><span class="uib_shim"></span>
                </div>-->
              </div>
              <span class="uib_shim"></span>
            </div>
          </div>
          <!-- /upage-content -->

        </div>
        <!-- /upage-outer -->

      </div>
      <!-- /upage -->
    </div>
    <!-- /content -->
    </div>
    <!-- /afui -->

我发现角度可以通过数据绑定正确加载内容。但是，它的应用程序框架没有处理新加载的内容，也没有正确呈现视图内容。

谁能帮助我如何使应用程序框架正确呈现新的加载视图。欢迎任何建议。

4

0 回答 0