微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

AngularJS,在 $q.all $scope 变量和 DOM 没有正确刷新之后

如何解决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(对于我的管理员配置文件)全部为真,但我遇到了一个奇怪的情况

enter image description here

如您所见,每个值都为真,但第一行全为假,$scope 以某种方式将所有这些假值视为真实值。

我做错了吗? $scope.restrictions 表现得如此奇怪是否有特殊原因?
我正在为垂直菜单执行此操作,我对其他解决方案持开放态度(例如包括模板,只要我可以动态加载我的语言翻译 json 文件并获得服务器端的许可)。

附言。 $scope.$apply(); 不起作用,因为该功能结束后我的 $digest 还没有完成。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。