如何在 Angularjs 中隐藏视图(指令 ng-view)

我有一个Angularjs应用程序。在主页中，我用ng-view指令调用视图。我想根据JS变量的值隐藏视图。

事实上，我检索了一个 Coldfusion SESSION 变量的值(我用这条指令在 JS 变量中转换：

<script type="text/javascript" language="JavaScript">
    <cfoutput>
        var #toScript(SESSION.viewerRole, "viewerRole")#;
    </cfoutput>
</script>

我在每个控制器中传递这个变量。

如果 viewRole 的值等于 1，我尝试显示视图，如果不是这种情况，我尝试显示错误消息：

在我的索引中.html：

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Cache-Control" content="no-cache">
        <meta http-equiv="Expires" content="-1">

        <script type="text/javascript" language="JavaScript">
            <cfoutput>
                var #toScript(SESSION.viewerRole, "viewerRole")#;
            </cfoutput>
            console.log("viewerRole: " + viewerRole); //OK it's working
        </script>           
        <title>My App/title>    
    </head>
    <body ng-app="ContactsApp" class="ng-app:ContactsApp" id="ng-app">
        ....................................................
        <cfif #SESSION.viewerRole# eq 1>            
            <ng-view></ng-view>
        <cfelse>
            <div class="alert alert-danger">
                <div>
                  you do not have sufficient access rights to access to this section
                </div>              
            </div>      
        </cfif>
        <script src="lib/js/angular.min.js"></script>
        <script src="lib/js/angular-route.min.js"></script>
        <script src="lib/js/angular-sanitize.min.js"></script>
        <script src="app/app.js"></script>
        <script src="app/appService.js"></script>
        <script src="lib/js/ngDialog.js"></script>
    </body>
</html>

这是我的应用程序.js：

var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap', 'ngDialog', 'angular-popover']);
// register the interceptor as a service
app.factory('HttpInterceptor', ['$q', '$rootScope', function($q, $rootScope) {
       return {
            // On request success
            request : function(config) {
                // Return the config or wrap it in a promise if blank.
                return config || $q.when(config);
            },
            // On request failure
            requestError : function(rejection) {
                //console.log(rejection); // Contains the data about the error on the request.  
                // Return the promise rejection.
                return $q.reject(rejection);
            },
            // On response success
            response : function(response) {
                //console.log(response); // Contains the data from the response.
                // Return the response or promise.
                return response || $q.when(response);
            },
            // On response failure
            responseError : function(rejection) {
                //console.log(rejection); // Contains the data about the error.
                //Check whether the intercept param is set in the config array. 
                //If the intercept param is missing or set to true, we display a modal containing the error
                if (typeof rejection.config.intercept === 'undefined' || rejection.config.intercept)
                {
                    //emitting an event to draw a modal using angular bootstrap
                    $rootScope.$emit('errorModal', rejection.data);
                }
                // Return the promise rejection.
                return $q.reject(rejection);
            }
        };
 }]);
app.config(function($routeProvider, $httpProvider, ngDialogProvider){
    console.log("CONFIG - adminRole: " + adminRole + " -- authorRole: " + authorRole + " -- viewerRole: " + viewerRole ); // It's correctly retrieved
    $httpProvider.defaults.cache = false;
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};
    }
    // disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
    // Add the interceptor to the $httpProvider to intercept http calls
    $httpProvider.interceptors.push('HttpInterceptor');
    $routeProvider.when('/all-contacts',
    {
      templateUrl: 'template/allContacts.html',
      controller: 'ctrlContacts',       
    })
    .when('/view-contacts/:contactId',
    {
      templateUrl: 'template/viewContact.html',
      controller: 'ctrlViewContacts'
    })  
    .otherwise({redirectTo:'/all-contacts'});  
});    
app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
});
app.controller('ctrlContacts', function ($scope, $timeout, MyTextSearch, ContactService, RequestService, ngDialog){
    $scope.adminRole =  adminRole;
    $scope.authorRole = authorRole;
    $scope.viewerRole = viewerRole;
    console.log("ctrlContacts: " + adminRole + " -- authorRole: " + authorRole + " -- viewerRole: " + viewerRole ); // It's correctly retrieved
    // LOAD THE LAST REQUESTS
    RequestService.loadLastRequests().success(function(lastRequests, status, header, config){
        .................................
    }   
});

一切正常，但是如果我使用 F5 刷新页面，我会遇到问题：视图不显示并显示错误消息(您没有足够的访问权限来访问此部分(。

你能帮我吗？

提前感谢您的帮助

我找到了问题的根源。我将会话数据放入 application.cfc 中的函数 onrequeststart.但是我没有考虑会话中的当前值(如果存在(。

现在解决了

相关内容

最新更新

热门标签：