A_J*_*A_J 6 javascript angularjs
我试图通过正常函数访问全局变量,是否可能?
我使用$ rootScope设置了一些var,我试图通过回调函数来访问它.从控制器调用此回调.我不想传递$rootScope那个回调.
有没有办法访问$rootScope.var?
如果可能,我愿意使用服务.
请建议.
谢谢
我试图访问rootScope如下:
function fbLandingCtrl($scope, $rootScope) {
$rootScope.isFBLoggedin = false;
$scope.login = function() {
console.log( $rootScope.isFBLoggedin);
fbHelper.login(getUserInfo);
};
function getUserInfo(){
fbHelper.getUserInfo(updateStatus);
}
function updateStatus(userInfo){
$rootScope.isFBLoggedin = true;
console.log( $rootScope.isFBLoggedin);
}
}
Run Code Online (Sandbox Code Playgroud)
我的服务如下:
myapp.factory('FBService', [ '$rootScope', function ($rootScope) {
$rootScope.isFBLoggedin = false; // global variable
$rootScope.userName = null;
$rootScope.userEmail = null;
return {
getStatus: function() {
return $rootScope.isFBLoggedin;
},
setStatus: function(status) {
console.log("Status:"+status);
return $rootScope.isFBLoggedin = status;
}
};
}]);
Run Code Online (Sandbox Code Playgroud)
它在updateStatus fn下显示isFBLoggedin为true但它没有反映在视图上
我正在打印{{isFBLoggedin}}但显示错误
最后它的工作.
我跟着@ dluz的解决方案.
我也习惯于$rootScope.$apply(function() {}})渲染视图
请不要使用$ rootScope来定义任何函数 - 这是非常糟糕的做法.请记住,$ rootScope毕竟是一个全局变量.
您可以通过以下服务获取$ rootScope:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myAppCtrl', ['$scope', 'myService', function ($scope, myService) {
console.log(myService.getData());
}])
myApp.factory('myService', [ '$rootScope', function ($rootScope) {
return {
getData: function() {
return $rootScope;
}
};
}])
</script>
</head>
<body ng-controller="myAppCtrl">
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
Angular中的作用域形成一个层次结构,原型继承自树顶部的根作用域.通常这可以忽略,因为大多数视图都有自己的控制器,因此也有范围.
有时,您希望为整个应用程序提供全局数据.对于这些,您可以像任何其他范围一样注入$ rootScope并在其上设置值.由于范围继承自根范围,因此这些值可用于附加到ng-show等指令的表达式,就像本地$ scope上的值一样.
当然,全局状态很糟糕,你应该谨慎地使用$ rootScope,就像你希望用任何语言的全局变量一样.特别是,不要将它用于代码,只用于数据.如果您想在$ rootScope上添加一个函数,那么将它放在一个可以在需要的地方注入的服务并且更容易测试几乎总是更好.
相反,不要创建一个服务,其唯一目的是存储和返回数据位.
更新的答案
A_J,我不确定你的申请是什么情况.我需要查看更多代码以便为您提供更好的答案,但请查看下面的代码.也许它可以让你知道如何设计你的代码来访问$rootScope内部service.
按"登录我"按钮,查看您的控制台.这里的工作示例(http://jsbin.com/olOyaHa/1/)
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('fbLandingCtrl', ['$scope', '$rootScope', 'loginService', function ($scope, $rootScope, loginService) {
$rootScope.isFBLoggedin = false;
$scope.login = function() {
console.log('Current login status', $rootScope.isFBLoggedin);
console.log(loginService.getUserInfo());
loginService.login(loginService.getUserInfo());
loginService.updateStatus();
};
}]);
myApp.factory('loginService', [ '$rootScope', function ($rootScope) {
return {
login: function() {
console.log('now I am logged in!');
return $rootScope.isFBLoggedin = true;
},
getUserInfo: function() {
return {
username: 'xmen',
role: 'admin',
logged: 'false'
};
},
updateStatus: function(userInfo){
$rootScope.isFBLoggedin = true;
console.log('Current login status', $rootScope.isFBLoggedin);
}
};
}])
</script>
</head>
<body ng-controller="fbLandingCtrl">
<button ng-click="login()">Log Me In</button>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
33785 次 |
| 最近记录: |