Menu
I am new to AngularJs.
I am developing a small angular app.
My Approach: My index.html page is having 2 parts, an ng-view and a div with 4 navigation buttons.The div is initilly hidden using ng-show.ng-show="variable" (a variable is created in the main controller with null value. This variable will turn from Null to true when log in is successful.).On successful login, the navigation div will be vissible, and rest of the things looks good , at least for now.
Issue: Login button initiats a login function, The login is happening only on clicking the button twice. In the console, i can see, two sucessive SessionIDs are created. The variable turns from null to True on 1st click. still there is on impact on entire page.
Can any one help.
877
I haven't seen your code, but think your problem is that you are trying to change view scope and it is not the same scope as your navigation div have. In that case you can either modify your navigation div to have the same scope as view have or use $rootScope.
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
<script src="http://code.angularjs.org/1.2.10/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Log-on App</h1>
<div>
<ul ng-show="variable">
<li><a href="#/one">One</a></li>
<li><a href="#/two">Two</a></li>
<li><a href="#/three">Tree</a></li>
<li><a href="#/fore">Fore</a></li>
</ul>
</div>
<div ng-view></div>
</body>
</html>
JavaScript
angular.module('app', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
controller: 'appController',
template: '<div ng-show="!variable"><input type="text" /><input type="button" value="Log On" ng-click="login()" /></div>'
}).
otherwise({
redirectTo: '/'
});
}]).
controller('appController', ['$rootScope', '$scope', function($rootScope, $scope) {
$rootScope.variable = null;
$scope.login = function() {
$rootScope.variable = true;
}
}]);
Plunker: http://plnkr.co/edit/Cjn2K8IEg0WQZDGVwPIw?p=preview
Other reason that I can think about is that you are trying to modify $scope outside of controller. In that case you should call $scope.$digest() or $scope.$apply() after you modify scope variables.
JavaScript
function logOnClick() {
var $scope,
div;
div = document.getElementById('navigationDivId');
$scope = angular.element(div).scope();
$scope.variable = true;
$scope.$digest();
}
EDIT: log-on using remote service
angular.module('app', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
controller: 'appController',
template: '<form ng-show="!variable"><input type="text" name="user" ng-model="user" placeholder="user name"/><br/><input type="password" name="password" ng-model="password" placeholder="password" /><br/><input type="button" value="Log On" ng-click="login()" /></form>'
}).
otherwise({
redirectTo: '/'
});
}]).
factory('appLoginService', ['$http', function($http) {
var isLogedOn = false,
user;
return {
login: function(name, password) {
return $http({
method: 'GET',
url: 'login',
params: {
name: name,
password: password
}
}).
success(function(data) {
if(data.status === 'OK' && data.authenticated === true) {
isLogedOn = true;
user = data.user;
}
}).
error(function(data) {
alert('Error!');
});
},
isLoggedOn: function() {
return isLogedOn;
},
getUser: function() {
return user;
}
}
}]).
controller('appController', ['$rootScope', '$scope', 'appLoginService', function($rootScope, $scope, appLoginService) {
$rootScope.variable = null;
$scope.login = function() {
appLoginService.
login($scope.user, $scope.password).
success(function() { // <- don't check isLoggedOn directly, wait until response come from server
$rootScope.variable = appLoginService.isLoggedOn();
});
}
}]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
