angularjs,在$q之后所有$scope变量和dom都不能正确刷新

xtfmy6hx  于 2021-09-29  发布在  Java
关注(0)|答案(0)|浏览(204)

我使用的是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 当该功能结束时,未完成工作。

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题