4

精简版：

此 plunkr 页面将角色设置为未定义，因此不会显示应显示的内容，但当通过单击触发时，角色似乎是正确的。

示例 plunkr 以强调问题：

http://plnkr.co/edit/QHUpCv?p=preview

完整版：

我有一个静态菜单，对于我的应用程序中的所有视图都是持久的。出于显而易见的原因，我想在显示之前解决 XHR 请求。

尝试使用 an-init，但它只是使函数异步调用，尝试使用来自 $q 对象的承诺，但这也无济于事。

html:

<div ng-app="myApp" ng-controller="homeCtrl">
<div ng-init="loadCurrentUser()" ng-include src="'partials/menu.html'"></div>
  <ng-view></ng-view>
</div>

控制器：

controller('homeCtrl', function($scope, $route, $location, authService){
    $scope.loadCurrentUser = authService.loadCurrentUser;
    $scope.model = {message : 'Hello Oleg'};
    $scope.logCurrentUser = function(){
        var user = authService.getUser();
        console.log(user);
    }

});

服务：

 authServ.loadCurrentUser = function () {
        alert('here');
        // var defer = $q.defer();
        return $http.get('/users/me', {
            withCredentials: true
        }).
        success(function (data, status, headers, config) {
            console.log(data);
            that.currentUser.company = {};
            that.currentUser.company.id = that.currentUser.company.id ? that.currentUser.company.id : data.main_company;            
            that.currentUser.companies = [];
            for (var i in data.roles) {
                that.currentUser.companies[data.roles[i]['company']] = data.roles[i]['company_name'];
                if (data.roles[i]['company'] == that.currentUser.company.id){
                    that.currentUser.role = data.roles[i]['role_type']; 
                    that.currentUser.company.name = data.roles[i]['company_name'];
                    // console.log(that.currentUser.role);
                } 
            }
            // defer.resolve(data);
            // defer.resolve();
        }).
        error(function (data, status, headers, config) {
            that.currentUser.role = 'guest';
            that.currentUser.company = 1;
            defer.reject("reject");
        });  
    // return defer.promise;
    }

限制角色访问级别指令：

angular.module('myApp.directives', []).
directive('restrict', function(authService){
    return{
        restrict: 'A',
        prioriry: 100000,
        scope: {
            // : '@'
        },
        link: function(){
            // alert('ergo sum!');
        },
        compile:  function(element, attr, linker){
            var user = authService.getUser();
                if(user.role != attr.access){
                console.log(attr.access);
                console.log(user.role);//Always returns undefined!
                    element.children().remove();
                    element.remove();           
                }

        }
    }
});
4

2 回答 2

1

我不确定你在做什么authService.getUser()

您可以在模板中观察变量，您可以在调用中设置该success变量XHR。

<div ng-app="myApp" ng-controller="homeCtrl">
<div ng-show="userLoaded" ng-include src="'partials/menu.html'"></div>
  <ng-view></ng-view>
</div>

在控制器中，在成功回调中，您可以执行以下操作：

this.userLoaded = true;

请注意，您将需要bind成功回调函数到$scope(as this/context)。您可以使用：

.success(angular.bind(this, function (data, status, headers, config) {...},
    data, status, headers, config));

另外，我不确定您所说的“那个”是什么意思。如果要访问$scope回调内部，请angular.bind按上述方式使用。

编辑ng-if如果使用 angular 1.1.x， 您可以使用。此外，如果您不希望元素被隐藏并且根本不创建它们，请使用ng-switch. 请注意，这ng-switch会创建一个新的$scope. 请参阅：https ://groups.google.com/forum/#!topic/angular/lJSp-hkileY

在您的指令函数中，您正在检查user.role编译函数，该函数在您实际尝试验证用户之前被评估。

于 2013-08-15T08:49:10.467 回答
0

有点猴子修补的解决方案，但它有效：

http://jsfiddle.net/K23B4/4/

简要说明：将负责进行所需 DOM 修改的函数作为参数传递给服务，将其保存在私有成员中，然后作为 AJAX 回调的一部分调用此函数。

不完美，但绝对比在控制器或指令中使用 ajax 更好。

应用：

var myApp = angular.module('myApp',[])
.factory("auth", function(){
    var onUserHandler;

    return {
        onUser: function(handler){
             onUserHandler = handler;    
        },

        getAuth: function(){
             setTimeout(onUserHandler, 3000);
        }
    }
});

function Main($scope, auth){
    $scope.src = "empty.html";

    auth.onUser(function(){
        $scope.src = "menu.html";
        $scope.$apply();
    });

    auth.getAuth();
}

看法：

<script type="text/ng-template" id="empty.html">
    <div>wait for it...</div>
</script>

<script type="text/ng-template" id="menu.html">
    <div>Hello user!!!</div>
</script>

<div ng-controller="Main">
    <div ng-include src="src"></div>
</div>

此代码由用户@Peled Roy https://stackoverflow.com/users/357506/peled-roy贡献

于 2013-08-15T11:49:06.597 回答