我使用的是AngularJSV1.5.8。我正在尝试构建一个动态垂直导航菜单(带子菜单)。dyanimc部分来自于每个用户都需要有在页面上登陆的权限(如果没有,菜单中的页面应该隐藏)。
<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, resolve or reject the promise when appropriate.
return $q(function(resolve, 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, resolve or reject the promise when appropriate.
return $q(function(resolve, 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();
});
})
}
要调用所有这些函数,我有一个“master”函数
$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
当该功能结束时,未完成工作。
暂无答案!
目前还没有任何答案,快来回答吧!