Я не видел вашего кода, но думаю, что ваша проблема в том, что вы пытаетесь изменить область просмотра, и это не та же область, что и у вашей навигации div
. В этом случае вы можете либо изменить свой div навигации, чтобы он имел ту же область видимости, что и представление, либо использовать $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
Другая причина, о которой я могу думать, это то, что вы пытаетесь изменить $scope
вне контроллера. В этом случае вы должны вызвать $scope.$digest()
или $scope.$apply()
после изменения переменных области.
JavaScript
function logOnClick() {
var $scope,
div;
div = document.getElementById('navigationDivId');
$scope = angular.element(div).scope();
$scope.variable = true;
$scope.$digest();
}
РЕДАКТИРОВАТЬ: вход в систему с помощью удаленной службы
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();
});
}
}]);
person
Vadim
schedule
03.02.2014