在Onsen UI中的pushPage不起作用

我使用onsen UI的ons分隔符與側邊菜單，出於某種原因，nav.pushpage在googleloginfunction中不起作用。在Onsen UI中的pushPage不起作用

請檢查下面的代碼。

HTML

<ons-navigator var="nav"> 
     <div ng-controller="MainController"></div> 
    </ons-navigator> 

    <ons-template id="login.html"> 
     <ons-page> 
     <ons-toolbar>  
      <div class="center"> 
      CRGroup 
      </div> 
     </ons-toolbar> 
     <div align="center" style="padding: 8px" id="deviceready"> 
      <br/> 
      <img src="img/logo2.png"/> 
      <br/> 
      <ons-button modifier="large" onclick="googlelogin()">Sign In with Google+</ons-button> 
     </div> 
     </ons-page> 
    </ons-template> 

    <ons-template id="principal.html"> 
     <ons-splitter var="mySplitter" ng-controller="SplitterController as splitter"> 
      <ons-splitter-side side="left" width="220px" collapse> 
      <ons-page> 
       <ons-list> 
       <ons-list-item ng-click="splitter.load('home.html')" tappable> 
        Home 
       </ons-list-item> 
       <ons-list-item ng-click="splitter.load('home2.html')" tappable> 
        Home 2 
       </ons-list-item>     
       </ons-list> 
      </ons-page> 
      </ons-splitter-side> 
      <ons-splitter-content page="login.html"></ons-splitter-content> 
     </ons-splitter> 
    </ons-template> 

    <ons-template id="home.html"> 
     <ons-page> 
     <ons-toolbar> 
      <div class="left"> 
      <ons-toolbar-button ng-click="mySplitter.left.open()"> 
       <ons-icon icon="md-menu"></ons-icon> 
      </ons-toolbar-button> 
      </div> 
      <div class="center"> 
      Main 
      </div> 
     </ons-toolbar> 
     <p style="text-align: center; opacity: 0.6; padding-top: 20px;"> 
      Swipe right to open the menu! 
     </p> 
     </ons-page> 
    </ons-template> 
    <ons-template id="home2.html"> 
     <ons-page> 
     <ons-toolbar> 
      <div class="left"> 
      <ons-toolbar-button ng-click="mySplitter.left.open()"> 
       <ons-icon icon="md-menu"></ons-icon> 
      </ons-toolbar-button> 
      </div> 
      <div class="center"> 
      Main 2 
      </div> 
     </ons-toolbar> 
     <p style="text-align: center; opacity: 0.6; padding-top: 20px;"> 
      Swipe right to open the menu! 
     </p> 
     </ons-page> 
    </ons-template>

<script type="text/javascript"> 

     var app = angular.module('my-app', ['onsen']); 

     app.controller('MainController',function($scope){ 
      $scope.nav.pushPage('principal.html'); 
     }); 

     app.controller('SplitterController', function() { 

      this.load = function(page) { 
       mySplitter.content.load(page).then(function() { 
        mySplitter.left.close(); 
       }); 
      }; 
      }); 
     function googlelogin($scope) {  
      window.plugins.googleplus.login(
       {}, 
       function (obj) { 
       alert(obj); 
        if(obj != null) {    
         window.localStorage.setItem("userid", obj.userId); 
         window.localStorage.setItem("name", obj.displayName); 
         window.localStorage.setItem("email", obj.email); 
         window.localStorage.setItem("profilepic", obj.imageUrl); 
         $scope.nav.pushPage('home.html'); 

        } 
        else { 
         alert("Something went wrong! Please try again later."); 
        } 
       }, 
       function (msg) { 
        alert(msg); 
       } 
      ); 
     } 

    </script>

基本上我有具有角JS組件分離器。當功能谷歌登錄調用成功，我想重定向到home.html模板。請幫幫我。

來源

2017-05-08 Rajesh Vishnani

嘗試輸入ONS-導航INT在附件分動器的內容ONS-分流

<ons-splitter-content> 
    <ons-navigator var="nav" page="principal.html"> </ons-navigator> 
</ons-splitter-content>

來源

2017-09-14 14:36:13

在Onsen UI中的pushPage不起作用

回答

相關問題