1

我正在开发一个与后端的 REST 服务器一起工作的 SPA。

我的目标是创建一个界面，这对所有角色都是相互的。

例如：在产品页面上，客人可以查看产品和评论，注册用户也有一个可以评论的文本框。管理员可以编辑评论和自己的产品，一切都在 SPA 的同一视图中完成。

所以实际上我们有 DOM 元素不应该为某些用户“编译”，但应该为其他用户“编译”。

为了控制对我的应用程序的访问，我正在做的是解决一个工厂，该工厂授予该用户有足够的权限来访问某个页面，该工厂还使用他的访问级别填充 rootScope。

然后在 xLimitAccess 指令的编译功能上，我检查当前用户的访问级别是否足以查看指令中的内容，然后将其删除。

问题：无法从 compile 函数中访问 $rootScope（因为它还不存在），如果我在链接函数中这样做，已经太晚了，并且无法从中删除元素DOM

HTML 代码示例：

<div class="product">...</div>

<div class="manageProduct" x-limit-access x-access-level="admin">...</div>

<div class="commnet" x-limit-access x-access-level="user, admin">...</div>

<div class="commnet" x-limit-access x-access-level="admin">...</div>

Javascript代码：

var app = angular.module('home', []);
// var host = 'http://127.0.0.1:8000';

app.config(function($routeProvider){

    $routeProvider.
    when('/', 
        {
            templateUrl: 'views/home.html', 
            controller: 'homeCtrl',
            resolve: {auth : 'authUser'} //this is a page only for logged in users
        }).
    when('/login', 
        {
            templateUrl: 'views/login.html', 
            controller: 'loginCtrl',
            resolve: {}
        }).
    when('/logout', 
        {
            templateUrl: 'views/logout.html',
            controller: 'logoutCtrl',
            resolve: {auth : 'authUser'} //this is a page only for logged in users

        }).
    when('/register', 
        {
            templateUrl: 'views/register.html',
            controller: 'registerController',
            resolve: {}
        }).
    when('/admin', 
        {
            templateUrl: 'views/admin/home.html',
            controller: 'registerController',
            resolve: {auth: 'authAdmin'}
        }).
    otherwise({ redirectTo: '/'});
    // $locationProvider.html5Mode(true);
}).
run(function($rootScope, $location, $http, authUser){
    $rootScope.$on("$routeChangeError", function(event, current, previous, rejection){
        if(rejection.status == 401)
            $location.path('/login');
    })

    $http.get('/users/me', {withCredentials: true}).
    success(function(data, status, headers, config){
        $rootScope.roles = data.roles;
    }).
    error(function(data, status, headers, config){
    });
});

app.factory('authUser', function($http){
        return $http.head('/users/me', {withCredentials: true});
});

app.directive('xLimitAccess', function(){
    return{
        restrict: 'A',
        prioriry: 100000,
        scope: {
            xAccessLevel: '='
        }
        compile: function(element,$rootScope){//this is essentially the problem
            if(scope.xAccessLevel != $rootScope.roles)
                element.children().remove();
                elemnet.remove();
        }
    }
})
4

1 回答 1

2

只看具体问题，$rootScope在你的指令的编译函数中没有：你可以将它注入你的指令而不是你的编译函数，如下所示app.directive('xLimitAccess', function ($rootScope) { }：compile 函数不支持注入——它直接传递一组值。

于 2013-08-06T12:50:30.953 回答