This one has me stumped. I've tried without $scope.$apply as well as using $scope.$watch. How do i update isLoggedIn when onlogin is called?
My controller code
myControllers.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.test = "hello";
$scope.isLoggedIn = false;
$scope.signIn = function() {
navigator.id.request();
};
$scope.$watch('isLoggedIn', function () {
$scope.$apply(function () {
$scope.test = "ETESFSF";
});
});
var currentUser = '[email protected]';
navigator.id.watch({
loggedInUser: currentUser,
onlogin: function (assertion) {
// A user has logged in! Here you need to:
// 1. Send the assertion to your backend for verification and to create a session.
// 2. Update your UI.
$http({ method: 'GET', url: '/api/login' }).
success(function (data, status, headers, config) {
$scope.$apply(function () {
$scope.isLoggedIn = true;
});
return data;
}).
error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
$scope.$apply(function () {
$scope.isLoggedIn = true;
});
return data;
});
},
onlogout: function () {
// A user has logged out! Here you need to:
// Tear down the user's session by redirecting the user or making a call to your backend.
// Also, make sure loggedInUser will get set to null on the next page load.
// (That's a literal JavaScript null. Not false, 0, or undefined. null.)
$.ajax({
type: 'POST',
url: '/auth/logout', // This is a URL on your website.
success: function (res, status, xhr) { window.location.reload(); },
error: function (xhr, status, err) { alert("Logout failure: " + err); }
});
}
});
}]);
My html code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Appp</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>
<body ng-app="myApp">
<a href="/">Home</a> |
<a href="/test">Test</a>
<div ng-controller="MainCtrl">
{{test}}
<div class="view-animate-container">
<div ng-view class="view-animate">
</div>
</div>
<div class="wrap">
<a ng-hide="isLoggedIn" ng-click="signIn();" class="persona-button orange"><span>Sign in with your Email</span></a>
<a ng-show="isLoggedIn" ng-click="signIn();" class="persona-button black"><span>Logout</span></a>
</div>
{{isLoggedIn}}
</div>
<script src="app/js/jquery-2.1.1.min.js"></script>
<script src="https://login.persona.org/include.js"></script>
<script src="app/js/angular.min.js"></script>
<script src="app/js/angular-route.min.js"></script>
<script src="app/js/angular-animate.min.js"></script>
<script src="app/js/app.js"></script>
<script src="app/js/controllers.js"></script>
<link rel="stylesheet" type="text/css" href="app/css/animation.css" />
<link rel="stylesheet" type="text/css" href="app/css/persona-buttons.css" />
</body>
</html>