導航後無法正確加載溫泉UI頁面

我正在開發基於Onsen UI（和PhoneGap + AngularJS）的移動應用程序。導航後無法正確加載溫泉UI頁面

當我瀏覽應用程序的兩個html頁面時，索引加載完美，但下一頁（登錄後應顯示的頁面不可用），樣式完全關閉，並且沒有控件正在工作。

我有具有以下體一個index.html：

<body> 
    <ons-navigator var="myNavigator" page="login.html"> 
    </ons-navigator> 

    <ons-template id="login.html"> 
    <ons-page ng-controller="LoginController" id="login"> 
     <ons-toolbar> 
      <div class="center">Log In</div> 
     </ons-toolbar> 

     <div class="login-form"> 
      <input type="text" class="text-input--underbar" placeholder="Email" ng-model="email"> 
      <input type="text" class="text-input--underbar" placeholder="Password" ng-model="password"> 
      <br><br> 
      <ons-button modifier="large" class="login-button" ng-click="checkLogin(email,password,spourl)" > Log In</ons-button> 
     </div> 

    </ons-page> 
    </ons-template> 

</body>

的main.html中具有以下機構：

<body ng-controller="AppController"> 
    <ons-tabbar> 
     <ons-tab active="true" page="upcoming_tasks.html"> 
      .... 
     </ons-tab> 
     <ons-tab page="settings.html"> 
      .... 
     </ons-tab> 
    </ons-tabbar> 

    <ons-template id="upcoming_tasks.html"> 
     <ons-page id="upcoming_tasks"> 
      .... 
     </ons-page> 
    </ons-template> 

    <ons-template id="settings.html"> 
     <ons-page id="settings"> 
      .... 
     </ons-page> 
    </ons-template>

我有兩個控制器：的LoginController其上成功登錄使用myNavigator去main.html（它在一個單獨的.html文件中） AppController在main.html文件中用於不同的ac蒸發散。兩者都從包含在兩個文件中的main.js文件加載。

如果我直接從瀏覽器訪問這兩個文件，它們的工作沒有任何問題（http://192.168..../index.html工作正常，而且http://192.168.../main.html工作正常）。錯誤只發生在我從index.html文件導航到main.html時。

可能是什麼問題？我對整個AngularJS，Onsen UI的事情相當陌生。

我真的不想將瀏覽器導航到main.html，因爲我使用服務在兩個控制器（登錄名和密碼）之間共享數據，並且如果瀏覽器重新加載main.html頁面，控制器將被初始化，數據將丟失。

下面是來自main.js文件藏漢一個片段：

var myApp = angular.module('app', ['onsen']); 
myApp.controller('LoginController', function ($scope, sharedProperties, Data) { 
     $scope.openProtectedPage = function() { 
      setTimeout(function() { 
       myNavigator.pushPage('main.html'); 
       //window.location.href = 'main.html'; 
      }, 1000); 

     } 

     $scope.checkLogin = function(email,password, url) { 
       //check email,pass and url 
        $scope.openProtectedPage(); 
     } 
}); 
myApp.controller('AppController', function ($scope, $timeout, sharedProperties, Data) { 
    $scope.email = sharedProperties.getUser(); 
    $scope.password = sharedProperties.getPass(); 
    $scope.url = sharedProperties.getUrl(); 

    //different functions for loading data and working with it 

}

來源

2015-08-25 Laureant

幾個問題在這裏：

1 - ons-template必須始終位於您index.html。否則，那些頁面將不會在您使用pushPage時創建。將upcoming_tasks.html，settings.html和任何其他模板移至您的索引。

2 - 從main.html頁面刪除body標籤。您只需要index.html中的文件，其餘文件（包括使用ons-template聲明的文件）必須僅包含您在導航器中顯示的實際內容。

3 - ons-navigator總是需要一個ons-page作爲一個孩子，所以你ons-tabbar與ons-page包住，以避免可能出現的問題（當你做pushPage('main.html')你包括ons-tabbar內ons-navigator你有index.html）。

4 - 也許您更喜歡使用resetToPage()而不是pushPage()在openProtectedPage()，因此用戶無法返回到登錄頁面（它從頁面堆棧中刪除）。

有許多例子在溫泉UI文檔：http://onsen.io/guide/overview.html

希望它能幫助！

編輯：

index.html：

<body> 

    <ons-navigator var="myNavigator" page="login.html"> 
    </ons-navigator> 

    <ons-template id="login.html"> 
     <ons-page ng-controller="LoginController" id="login"> 
      <ons-toolbar> 
       <div class="center">Log In</div> 
      </ons-toolbar> 

      <div class="login-form"> 
       <input type="text" class="text-input--underbar" placeholder="Email" ng-model="email"> 
       <input type="text" class="text-input--underbar" placeholder="Password" ng-model="password"> 
       <br><br> 
       <ons-button modifier="large" class="login-button" ng-click="checkLogin(email,password,spourl)" > Log In</ons-button> 
      </div> 

     </ons-page> 
    </ons-template> 


    <ons-template id="main.html"> 
     <ons-page> 
      <ons-tabbar> 
       <ons-tab active="true" page="upcoming_tasks.html"> 
        .... 
       </ons-tab> 
       <ons-tab page="settings.html"> 
        .... 
       </ons-tab> 
      </ons-tabbar> 
     </ons-page> 
    </ons-template> 

    <ons-template id="upcoming_tasks.html"> 
     <ons-page id="upcoming_tasks"> 
      .... 
     </ons-page> 
    </ons-template> 

    <ons-template id="settings.html"> 
     <ons-page id="settings"> 
      .... 
     </ons-page> 
    </ons-template> 

</body>

可選，你可以把你想要一個分隔的文件中，而不是任何ons-template的內容。

來源

2015-08-26 03:01:02

嗨弗蘭迪奧斯。謝謝您的回答！幾個後續問題：1.如果main.html中的所有ons-templates都將在index.html中，爲什麼我仍然需要main.html文件，爲什麼您要在以下步驟中引用它？你基本上說所有的「頁面」應該在index.html文件中聲明，並且pushPage方法會使用這些模板而不是實際的.html文件？您知道，index.html文件是一個簡單的頁面，但main.html文件中有3個模板（本地創建的html事物）。這在UI的整個結構中不會成爲問題嗎？ – Laureant

在'main.html'中，你也有一個沒有**'ons-template'的tabbar **，所以我假設你把它留在'main.html'文件中。如果你想把它也包含在'ons-template'中，那麼是的，你必須把它移動到'index.html'。您也可以像平常一樣不使用'ons-template'來創建每頁文件，只是不包含'body'標籤或類似的東西。 –

好吧，如果你檢查名字，tabbar是從同一個文件引用ons-templates。我發現它是一個例子，實際上它是Onsen UI的基本模板文件。如果可以在一個index.html文件中完成，那麼登錄頁面在成功登錄後會消失，以及之前在main.html文件中的下3個頁面都將正確加載，那麼這將是完美的，因爲那樣我就可以將變量保存在控制器中。 – Laureant

導航後無法正確加載溫泉UI頁面

回答

相關問題