Onsen UI의 pushPage가 작동하지 않습니다.

Question

사이드 메뉴가있는 onsen UI ons 스플리터를 사용하고 있습니다. 어떤 이유로 nav.pushpage가 googleloginfunction에서 작동하지 않습니다.

아래 코드를 확인하십시오.

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> 

JS

<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와 기능 스플리터가 있습니다. 함수가 Google login이 성공적으로 호출 할 때 home.html 템플릿으로 리디렉션하려고합니다. 도와주세요.

Answer 1

기능 스플리터 콘텐츠의 기능 스플리터하는 int 기능 - 네비게이터를 입력하려고

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