I am currently utilizing onsen UI's ons splitter along with a side menu. Interestingly, I am encountering an issue where the nav.pushpage function does not seem to work within the googleloginfunction.
Please take a look at the code provided below.
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>
Javascript
<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>
Essentially, my setup involves an ons splitter in combination with angular js. Upon successful execution of the google login function, my objective is to navigate to the home.html template. Any assistance would be greatly appreciated.