Javascript ui路由器当前状态下如何绑定相关值?
我在每个Javascript ui路由器当前状态下如何绑定相关值?,javascript,angularjs,angularjs-scope,angular-ui-router,angularjs-controller,Javascript,Angularjs,Angularjs Scope,Angular Ui Router,Angularjs Controller,我在每个.state中都附加了数据属性,以标识用户(已验证或公共),如下所示(一个state示例) 我需要使用user(authenticated和public)的some状态作为示例 .state('403', { url: '/403', templateUrl: '403.tmpl.html', controller: function($scope, $state, APP, Auth) { $scope.app = APP; $
.state
中都附加了数据属性,以标识用户(已验证或公共),如下所示(一个state示例)
我需要使用user(authenticated和public)的some状态作为示例
.state('403', {
url: '/403',
templateUrl: '403.tmpl.html',
controller: function($scope, $state, APP, Auth) {
$scope.app = APP;
$scope.goHome = function() {
if(Auth.isAuthenticated()){
$scope.requireLogin = true;
$state.go('admin-panel.default.home');
}
else{
$scope.requireLogin = false;
$state.go('admin-panel.public.home');
}
};
},
data: {
requireLogin: $scope.requireLogin
}
})
这里,当经过身份验证的用户访问此状态时,我需要将真值传递给requireLogin:true
,当公共用户访问此状态时,我需要将false
值传递为requireLogin:false
。如上所述,我在控制器中检查了当前用户状态。如何将$scope.requireLogin
绑定到数据属性
ui路由器专家请告诉我一个解决方法???你可以用一种非常干净的方法解决你的问题。让我们从一个全局控制器示例GlobalCtrl
开始,它被添加到body
或html
标记中,如ng controller=“GlobalCtrl
这样做将使我们能够在整个单页Angular应用程序中保持此GlobalCtrl
的作用域(当您使用ui路由器时),并且我们可以避免使用$rootScope
(实际上模拟了$rootScope
)的用法
现在,在您的GlobalCtrl
中定义如下内容:
// Using an object to avoid the scope inheritance problem of Angular
// https://github.com/angular/angular.js/wiki/Understanding-Scopes
$scope.globalData = {};
// Will be called everytime before you start navigating to any state
$scope.$on('$stateChangeStart', function(event, toState, toParams) {
$scope.globalData.requireLogin = false;
var statesToLoginCheck = ['403', 'foo', 'bar']; // and other states on which you want to check if user is logged in or not
// If the current state on which we are navingating is allowed to check for login
if (statesToLoginCheck.indexOf(toState.name) > -1) {
if (Auth.isAuthenticated()) {
$scope.globalData.requireLogin = true;
$state.go('admin-panel.default.home');
} else {
$scope.globalData.requireLogin = false;
$state.go('admin-panel.public.home');
}
event.preventDefault();
return;
}
});
现在,由于GlobalCtrl
的$scope
位于body
或html
中,因此每个状态或指令都将继承此GlobalCtrl
的范围,然后您只需签入变量的任何控制器$scope.globalData.requireLogin
,您告诉我们不需要它(数据:{requireLogin:$scope.requireLogin})在每个状态中,对吗?
// Using an object to avoid the scope inheritance problem of Angular
// https://github.com/angular/angular.js/wiki/Understanding-Scopes
$scope.globalData = {};
// Will be called everytime before you start navigating to any state
$scope.$on('$stateChangeStart', function(event, toState, toParams) {
$scope.globalData.requireLogin = false;
var statesToLoginCheck = ['403', 'foo', 'bar']; // and other states on which you want to check if user is logged in or not
// If the current state on which we are navingating is allowed to check for login
if (statesToLoginCheck.indexOf(toState.name) > -1) {
if (Auth.isAuthenticated()) {
$scope.globalData.requireLogin = true;
$state.go('admin-panel.default.home');
} else {
$scope.globalData.requireLogin = false;
$state.go('admin-panel.public.home');
}
event.preventDefault();
return;
}
});