短版本:
这个plunkr页面将角色设置为未定义,因此不会显示应该显示的内容,但当点击触发时,角色似乎是正确的。
示例plunkr强调问题:
http://plnkr.co/edit/QHUpCv?p=preview
完整版本:
我有一个静态菜单,它对我的应用程序中的所有视图都是持久的。出于显而易见的原因,我想在显示XHR请求之前解决它
尝试使用init,但它只是异步调用函数,尝试使用$q对象中的promise,但这也没有帮助。
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();
}
}
}
});
我不确定你在用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>
在控制器中,在成功回调时,您可以做:
this.userLoaded = true;
请注意,您将需要bind
成功回调函数到$scope
(作为this
/context)。您可以使用:
.success(angular.bind(this, function (data, status, headers, config) {...},
data, status, headers, config));
我也不知道你说的"那个"是什么意思。如果您想访问回调中的$scope
,请如上所述使用angular.bind
。
编辑如果使用angular 1.1.x,则可以使用ng-if
。此外,如果您不希望元素只是隐藏而根本不创建它们,请使用ng-switch
。注意,CCD_ 11创建新的CCD_ 12。请参阅:https://groups.google.com/forum/#!主题/角度/lJSp hkileY
在指令函数中,您将在编译函数中检查user.role
,该函数在您实际尝试验证用户之前进行评估。
一个有点猴子补丁的解决方案,但它有效:
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