2014-12-13 66 views
0

我有以下的HTML和控制器。出於某種原因,標記爲<p>Application Shell...的行完全不呈現url。這條線在任何命名視圖之外,並且我期望它顯示出來,而不管任何視圖。使用ui-router視圖時可以顯示內容嗎?

我在想我是否錯誤地使用了ui-router。當使用視圖時,頁面上是否還有其他內容?這是因爲ionicFramework還是這種行爲本地角/ UI路由器?我會感謝你的幫助。

我有2個「視圖」 - 搜索,應該在狀態搜索時填充;以及應該填充的nav +細節的組合。

<body ng-app="myapp"> 
    <ion-nav-view> 
    </ion-nav-view> 
</body> 

--- shell.html --------- 

<div> 
    <ion-header-bar class="logo-bar"> 
     some header 
    </ion-header-bar> 
    <div style="background: pink"> 
     <p style="position: absolute; top: 146px;"> {{name}}, Application Shell, has 2 peer subviews</p> 
     <ion-nav-view name="searchContent" style="position: absolute; top: 44px;">coming soon... search</ion-nav-view> 
     <ion-nav-view name="navContent" style="position: absolute; top: 88px;">coming soon... nav</ion-nav-view> 
     <ion-nav-view name="detailContent" style="position: absolute; top: 126px;">coming soon... detail</ion-nav-view> 
    </div> 
    <div class="bar bar-footer bar-balanced"> 
     <div class="title">Footer</div> 
    </div> 
</div> 

----- nav.html ---------- 

<div style="background: yellow"> 
    <p>nav content is in yellow</p> 
</div> 

----- detail.html ------ 

<div style="background: orange"> 
    <p>detail content is in orange</p> 
</div> 

----- router (states) --- 

function RouterConfig($stateProvider, $urlRouterProvider) { 
     $stateProvider 
      .state('root', { 
       abstract: true, 
       templateUrl: "templates/shell.html" 
      }) 
      .state('root.home', { 
       url: "/", 
       views: { 
        'navContent': { templateUrl: "templates/nav.html" }, 
        'detailContent': { templateUrl: "templates/detail.html" } 
       } 
      }) 
      .state('root.search', { 
       url: "/search", 
       views: { 
        'searchContent': { templateUrl: "templates/search.html" } 
       } 
      }); 
     $urlRouterProvider.otherwise('/'); 
} // RouterConfig() 

回答

0

此行爲是AngularJS路由的一部分。但是,如果您希望某些靜態內容成爲您使用的一個或多個視圖的一部分,則始終可以使用ngInclude指令來加載某些靜態內容。

例如,

<div class="slide-animate" ng-include="yourStaticFile.html"></div> 

更多細節可以發現here

+0

我的壞,我已經由「靜態」的東西,是不是在一個特定視圖的意思。 – Dinesh 2014-12-14 18:29:24

+0

你能否詳細說明你的要求,你究竟在做什麼? – 2014-12-15 03:59:36

+0

謝謝。我正在使用狀態和視圖重做我的Web應用程序。所以我有一個可以容納多個不同視圖的頁面框架。 (有一個視圖層次結構)。但是在使用離子時我很難看到骨架內容 - 在上面的例子中,「p1」是離子隱藏它的。它在dom中,我可以在改變顏色(到<> background)和z-index(到> 1)後看到它。我不知道是否這是一個錯誤或功能。 – Dinesh 2014-12-15 06:51:32

相關問題