我使用的是Angular NG-Show指令来检查用户是否是管理员用户,如果他们是"显示"某些HTML元素。
我首先在我的mainController
中创建了以下称为checkIfUserIsAdmin
的功能:
$scope.checkIfUserIsAdmin = function(){
var userPrivilegeID = sharedFactory.userDetails.userPrivilegeID;
if(userPrivilegeID === 2){
return true;
}else{
return false;
}
}
,在我的html中,我有以下内容:
<span ng-show="checkIfUserIsAdmin()"><i class="fa fa-check-circle"></i></span>
它与NG-Show合作良好,HTML正在按计划进行更改。
但是,我决定要在工厂中定义此功能,以便将其传递给多个控制器。
现在,当用户privilegeid更改视图时,视图不会更新(如NG-Show所应)。很抱歉,如果这是一个愚蠢的错误,但是我一直在努力弄清楚它,但没有在网上找到任何东西。你能帮忙吗?
sharedFactory.js
//create a factory so that we can pass these variables between different controllers.
myApp.factory('sharedFactory', function(){
//private variables
var userDetails = {
"userID" : null,
"userPrivilegeID" : 1,
"isLoggedIn" : false
};
var checkIfUserIsAdmin = function(){
var userPrivilegeID = userDetails.userPrivilegeID;
if(userPrivilegeID === 2){
return true;
}else{
return false;
}
};
//return public API so that we can access it in all controllers
return{
userDetails: userDetails,
checkIfUserIsAdmin: checkIfUserIsAdmin
};
});
maincontroller.js
myApp.controller("mainController", function($scope, sharedFactory){
$scope.checkIfUserIsAdmin = function(){
return sharedFactory.checkIfUserIsAdmin;
}
});
index.html文件(此问题的最相关部分)
<body data-ng-controller="mainController">
<div id="container_wrapper">
<div class="container">
<span ng-show="checkIfUserIsAdmin()"><i class="fa fa-check-circle"></i></span>
<div ng-view>
<!--our individual views will be displayed here-->
</div>
</div>
</div>
</body>
编辑:如上所述,用户privilegeid被初始化为1。但是,在我进行API调用后,它将其设置为2,但是NG-Show没有更新以显示HTML。这是我的loginFactory,其中包含API调用
myApp.factory('loginFactory', function($http, $timeout, $q, sharedFactory){
//Methods which perform API calls
var checkLoginDetails = function(data){
var deferred = $q.defer();
$http({
method: 'POST',
url: 'http://localhost/API/auth?apiKey=0417883d',
data : JSON.stringify(data),
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
responseType:'json'
}).then(function successCallback(response){
if(response.hasOwnProperty('data') && response.data !== null){
console.log(JSON.stringify(response.data));
sharedFactory.userDetails = {
"userID" : response.data.userID,
"userPrivilegeID" : response.data.userPrivilegeID,
"isLoggedIn" : true
};
$timeout(function() {
deferred.resolve(sharedFactory.userDetails);
}, 100);
}else{
sharedFactory.buildErrorNotification(response);
}
},function errorCallback(response){
sharedFactory.buildErrorNotification(response);
});
//return the userDetails promise
return deferred.promise;
};
//return public API so that we can access it in all controllers
return{
checkLoginDetails: checkLoginDetails
};
});
,然后在我的主构造器中,我有以下(调用CheckLogIndetails函数):
$scope.loginWithFacebook = function(){
var data = {//...
};
loginFactory.checkLoginDetails(data).then(function(userDetails) {
//Since the checkLoginDetails method (in the loginFactory) is performing a http request we need to use a promise
//to store the userDetails (from the response) into our $scope.userDetails variable.
$scope.userDetails = userDetails;
});
}
您在呼叫服务功能的呼叫上离开了Parens。
myApp.controller("mainController", function($scope, sharedFactory){
$scope.checkIfUserIsAdmin = function(){
return sharedFactory.checkIfUserIsAdmin(); //<-- Needs to actually call the function.
}
});
将您的服务更改为这样的东西:
//create a factory so that we can pass these variables between different controllers.
myApp.factory('sharedFactory', function(){
//private variables
var service = {
userDetails: {
"userID" : null,
"userPrivilegeID" : 1,
"isLoggedIn" : false
}
};
service.checkIfUserIsAdmin = function (){
var userPrivilegeID = service.userDetails.userPrivilegeID;
if(userPrivilegeID === 2){
return true;
}else{
return false;
}
};
//return public API so that we can access it in all controllers
return service;
});