AngularJs：登录只有两次点击后发生两次、发生、AngularJs
我是新来AngularJs。
I am new to AngularJs.
我开发一个小角度的应用程序。
I am developing a small angular app.
我的方法：我的index.html页面是有两部分，一个 NG-视图和 DIV有4个导航按钮 .The格采用NG-show.ng秀initilly隐藏= 变量（一个变量与空值主控制器创建的。这个变量会从空转到真正当日志是成功的）。成功登录后，导航的div会vissible，和的事情其余看起来不错，至少现在是这样。
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.
问题：登录按钮initiats登录功能，登录上两次单击按钮仅发生。在控制台中，我可以看到，创建了两个逐次SessionIDs。可变从零变为真在1日的点击。还有在整个页面上的影响。
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.
任何一个可以帮助。
推荐答案
我还没有看到你的code，但觉得你的问题是，你正在试图改变视图范围，它是不一样的范围，因为你的导航 DIV 有。在这种情况下，您可以修改您的导航div来有相同的范围，因为视图拥有或使用 $ rootScope 。
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
这是我能想到的另一个原因是你要修改 $范围控制器之外。在这种情况下，你应该叫 $范围。$摘要（）或 $范围。$ Apply（应用）修改后范围变量。
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();
}
的 修改：登录使用远程服务的
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();
});
}
}]);
