所以我在使用 ngView 时遇到了这个问题,并且我有一个整个静态的导航栏,如下所示:
<div ng-include="'views/nav.html'" ng-controller="NavCtrl"></div>
<div class="container-fluid" ng-view=""></div>
这个 nav.html,导航栏,如果用户注销(使用 ng-show)显示一组特定的功能(登录、注册),如果用户登录则显示其他菜单选项。因为重使用当前用户,我将此信息放在 $rootScope 中,如下所示:$rootScope.currentUser
- 返回用户对象,$rootScope.signedIn
- 返回 bool 值。
基本上,我想延迟导航栏的加载,直到加载了 $rootScope.signedIn
并且是 true 或 false,并且 $rootScope.currentUser
是一个对象或未定义.
我试过在我的 app.config 路由中创建 promise ,但我不确定如何将 promise 返回到永久 View 状态。
感谢任何帮助。
编辑:
这是我广播登录信息的服务。这会在用户通过身份验证/登录或注销时触发:
var authClient = new FirebaseSimpleLogin(refDownload, function(error, user) {
if (error) {
incorrectLogin(error.code);
}
if (user) {
// user authenticated
$rootScope.$broadcast('login');
correctLogin(user.id);
} else {
// user is logged out
$rootScope.$broadcast('logout');
}
});
此服务通过以下方式注入(inject)到 NavCtrl Controller 中:
$scope.isHidden = true;
$scope.$on('login', function() {
console.log('login broadcast');
$scope.isHidden = false;
});
$scope.$on('logout', function() {
console.log('broadcast logout');
$scope.isHidden = true;
});
此 Controller 的模板是 nav.html,如下所示:
<div class="col-xs-4 centered" id="nav-hover" ng-show="isHidden">
<ul class="nav navbar-nav">
<li id="nav-login"><a ng-href="#/login"><span class="glyphicon glyphicon-log-in"> Login</span></a></li>
</ul>
</div>
<div class="col-xs-4 centered" id="nav-hover" ng-show="isHidden">
<ul class="nav navbar-nav">
<li id="nav-login"><a ng-href="#/register"><span class="glyphicon glyphicon-edit"> Register</span></a></li>
</ul>
</div>
<div class="col-xs-2 centered" id="nav-hover">
<ul class="nav navbar-nav" ng-hide="isHidden">
<li ng-class="{{ chatCat.active }}"><a ng-href="{{ chatCat.url }}"><span class="{{ chatCat.icon }}"></span></a></li>
</ul>
</div>
同样,此 View 绑定(bind)到 NavCtrl。登录用户时,我按如下方式使用 AuthCtrl:
$scope.login = function() {
if ($scope.user !== undefined) {
Auth.login($scope.user);
$location.path('/dexter');
} else {
console.log('nothing entered');
}
};
当我尝试登录时,导航 View 不会更新为新值,尽管广播是从“已登录”的服务中触发的。
授权服务:
'use strict';
app.factory('Auth',
function($rootScope, $location, $firebase, $firebaseSimpleLogin, firebaseUrl) {
var refDownload = new Firebase(firebaseUrl + 'housemates');
var sync = $firebase(refDownload);
var ref = sync.$asObject();
var authClient = new FirebaseSimpleLogin(refDownload, function(error, user) {
if (error) {
incorrectLogin(error.code);
}
if (user) {
// 1
// user authenticated
correctLogin(user.id);
} else {
// user is logged out
// $rootScope.signedIn = false;
}
});
var Auth = {
housemates: ref,
changeColor: function(color) {
var id = $rootScope.currentUser.id.toString();
refDownload.child(id).update({ color: color });
$rootScope.currentUser.color = color;
},
create: function(authUser, usr) {
refDownload.child(authUser.id).set({
initials: usr.initials,
email: authUser.email,
password: usr.password,
color: 'Blue',
id: authUser.id,
uid: authUser.uid,
rememberMe: true,
});
},
// 3
findById: function(id) {
refDownload.on('value', function(snapshot) {
var userObject = snapshot.val();
// 4 - sets currentUser
//$rootScope.currentUser = userObject[id];
var currentUser = userObject[id];
Auth.setUser(currentUser);
// $rootScope.signedIn = true;
}, function (error) {
console.log(error);
});
},
login: function(user) {
authClient.login('password', {
email: user.email,
password: user.password,
rememberMe: true
});
},
logout: function() {
delete $rootScope.currentUser;
delete $rootScope.signedIn;
delete $rootScope.error;
return authClient.logout();
},
register: function(user) {
var userSimple = user;
authClient.createUser(user.email, user.password, function(error, user) {
if(!error) {
var userComplex = user;
Auth.login(userSimple);
Auth.create(userComplex, userSimple);
return user;
} else {
console.log(error);
}
});
},
setUser: function(aUser) {
console.log('setuser ran');
$rootScope.currentUser = aUser;
console.log('setUser: ' + $rootScope.currentUser);
},
isLoggedIn: function() {
console.log($rootScope.currentUser);
return ($rootScope.currentUser) ? $rootScope.currentUser : false;
},
};
// 2
function correctLogin(id) {
Auth.findById(id);
}
function incorrectLogin(error) {
alert(error);
$rootScope.error = error;
}
return Auth;
});
最佳答案
在菜单上使用一些 $rootScope.$broadcast 和 ng-hide,这可以很容易地完成。看这个plunker
html:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-include="'nav.html'" ng-controller="NavCtrl" ng-hide="isHidden"></div>
<button class="btn" ng-click="login()">Login</button>
<button class="btn" ng-click="logout()">Logout</button>
</body>
</html>
JavaScript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $rootScope) {
$scope.login = function() {
$rootScope.$broadcast("login");
}
$scope.logout = function() {
$rootScope.$broadcast("logout");
}
});
app.controller('NavCtrl', function($scope) {
$scope.isHidden = true;
$scope.$on('login', function() {
console.log("logged in");
$scope.isHidden = false;
});
$scope.$on('logout', function() {
console.log("logged out");
$scope.isHidden = true;
});
});
关于javascript - 在页面加载之前等待 $rootScope 值在 Angular 中解析,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26180520/