Javascript 如何在使用ng include加载分部之前解析XHR请求

简短版本：

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

示例plunkr强调问题：

整版：

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

尝试使用init，但它只是异步进行函数调用，尝试使用$q对象的承诺，但也没有帮助

html:

服务：

 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();           
                }

        }
    }
});

---

我不确定您使用的是

authService.getUser（）

您可以在模板中查看变量，您可以在

XHR

调用的

success

中设置该变量

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

请注意，您需要将成功回调函数绑定到

$scope

（与

此

/context一样）。您可以使用：

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

我也不知道你所说的“那”是什么意思。如果要访问回调中的

$scope

，请如上所述使用

angular.bind

编辑 如果使用角度1.1.x，则可以使用

ng。此外，如果您不希望元素只是隐藏而根本不创建它们，请使用
ng开关
。请注意，
ng开关
创建一个新的
$scope
。请参阅：

在您的指令函数中，您正在检查编译函数中的
user.role
，该函数在您实际尝试验证用户身份之前会得到评估。
有点像猴子补丁解决方案，但它可以工作：


简要说明：
将负责进行所需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();
}

视图：


等等。。。
你好，用户！！！

此代码由用户@Peled Roy提供
我应该使用ng show还是ng if？。我之所以使用它，是因为我对这个服务的geeter方法有一个问题，如下所述：不起作用，我仍然会被未定义的注销。也许我忘了提到我正在使用一个指令，该指令试图删除在它的$compile函数中不应该显示给当前用户角色的元素，我添加了相关的代码
this.userLoaded = true;

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

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>