Onsen UI 中的 pushPage 不起作用

Question

我正在使用带有侧边菜单的温泉 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 的 ons 拆分器。当函数 google login 调用成功时，我想重定向到 home.html 模板。请帮帮我。

Answer 1

尝试将 ons-navigator 输入到 ons-splitter-content 中的 ons-splitter

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