如何解决AngularJS,在 $q.all $scope 变量和 DOM 没有正确刷新之后
我使用的是 AngularJS v1.5.8。我正在尝试构建一个动态垂直导航菜单(带子菜单)。动态部分来自每个用户都需要有登陆页面的权限(如果没有,应该隐藏菜单中的页面)。
<div class="sidebar" ng-if="isLogged">
<div ng-show="restrictions[10]">
<button class="dropdown-btn textColor">
Planning <i class="fa fa-chevron-down pull-right"></i>
</button>
<div class="dropdown-container">
<div ng-repeat="function in planningFunctions" role="menuitem">
<a class="dropdown-position" ui-sref="{{function.route}}">{{function.label}}</a>
</div>
</div>
</div>
<div ng-show="restrictions[0]">
<button class="dropdown-btn textColor">
Configuration <i class="fa fa-chevron-down pull-right"></i>
</button>
<div class="dropdown-container">
<div ng-repeat="function in configurationFunctions" role="menuitem">
<a class="dropdown-position" ui-sref="{{function.route}}">{{function.label}}</a>
</div>
</div>
</div>
<a ng-show="restrictions[1]" class="textColor" href="#services">Catalog</a>
</div>
控制器调用了一系列函数,但我们需要的是最后一个。之前的函数我会不加逻辑地发布,它们不会影响我想要的(如果你不需要探索我做了什么,你可以跳过这些)。
function init() {
// perform some asynchronous operation,resolve or reject the promise when appropriate.
return $q(function(resolve,reject) {
//Logic
resolve();
});
}
function loadLanguage() {
// perform some asynchronous operation,reject) {
$http.post(apihost + '/languages/language_frontend',{page: "home"}).then(function(language) {
$scope.language = language.data.json;
// *************************** Pianificazione Attività ***************************
$scope.planningFunctions = [];
$scope.planningFunctions.push({label: $scope.language.planning.functions.mission_list,route: 'missionList'});
// *******************************************************************************
// ******************************* Configurazione *******************************
$scope.configurationFunctions = [];
if($scope.accessLevel(1) > 0) {
$scope.configurationFunctions.push({label: $scope.language.configuration.functions.value_list,route: 'listofValues'});
$scope.configurationFunctions.push({label: $scope.language.configuration.functions.group_building_types,route: 'buildingTypesGroups'});
}
if($scope.accessLevel(2) > 0) {
$scope.configurationFunctions.push({label: $scope.language.configuration.functions.dealers,route: 'dealers'});
$scope.configurationFunctions.push({label: $scope.language.configuration.functions.companies,route: 'companies'});
}
//Logic
})
.then(function() {
resolve();
});
});
}
现在是棘手的部分:我需要基于用户个人资料的每个页面的单一权限。我已经有了服务器端功能来做到这一点,而且它可以工作。我想一次性获得所有结果(真或假),所以我使用了 promise.all 的前端等效项。所有权限信息在每次函数调用时都一一存储在 $scope.restrictions
数组中,每个页面都初始化为 false。
function load_singlePermission (permission,valuePermission,restrictions,i) {
$http.post(apihost + '/users/canaccess',{restrictions: valuePermission}).success(function(result) {
if(result.access === "ok") {
restrictions[i] = true;
}
return restrictions;
});
}
function loadPermissions() {
// perform some asynchronous operation,reject) {
var permission = {
'configuration': [1,2,3,4,5],'catalog': [8],'buildings': [6,7,9,10],'approvals': [11],'inspections': [12,20,21,13,14,22,15,16],'pictures': [25,26,27,28,29],'prescriptions': [30],'evidences': [31,32],'evaluation' : [18,19,23,24],'queryReport': [33,34,35],'programActivities': [36,37,40],'restitution': [38],'documentation': [39]
};
//Dichiaro tante restriction false quante sono le permission
$scope.restrictions = [];
for(var i=0; i<Object.keys(permission).length; i++) { $scope.restrictions.push(false); }
var promises = [];
var i = 0;
angular.forEach(permission,function(value,key) {
promises.push(load_singlePermission(key,value,$scope.restrictions,i));
i++;
});
$q.all(load_singlePermission).then(function(result) {
resolve();
});
})
}
$scope.masterFunction = function() {
var promise_init = init();
promise_init.then(function(result_promise_init) {
var promise_loadLanguage = loadLanguage();
promise_loadLanguage.then(function(result_promise_loadLanguage) {
var promise_loadPermissions = loadPermissions();
promise_loadPermissions.then(function(result_promise_loadPermissions) {
console.log($scope.restrictions);
},function(error) {
console.log(error);
});
},function(error) {
console.log(error);
});
},function(error) {
console.log(error);
});
}
$scope.masterFunction();
当 masterFunction
完成时,我期望 $scope.restrictions
(对于我的管理员配置文件)全部为真,但我遇到了一个奇怪的情况
如您所见,每个值都为真,但第一行全为假,$scope
以某种方式将所有这些假值视为真实值。
我做错了吗? $scope.restrictions
表现得如此奇怪是否有特殊原因?
我正在为垂直菜单执行此操作,我对其他解决方案持开放态度(例如包括模板,只要我可以动态加载我的语言翻译 json 文件并获得服务器端的许可)。
附言。 $scope.$apply();
不起作用,因为该功能结束后我的 $digest
还没有完成。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。