我有一个问题,我在控制器的范围上初始化一个变量。然后当用户登录时,它在另一个控制器中被更改。该变量用于控制导航栏等内容,并根据用户类型限制对站点部分内容的访问,因此保持其值很重要。它的问题是,初始化它的控制器,被angular以某种方式再次调用,然后将变量重置回初始值。
我认为这不是声明和初始化全局变量的正确方式,好吧,它并不是真正的全局,所以我的问题是,正确的方式是什么?有没有什么好的例子可以在当前版本的angular中使用?
我有一个问题,我在控制器的范围上初始化一个变量。然后当用户登录时,它在另一个控制器中被更改。该变量用于控制导航栏等内容,并根据用户类型限制对站点部分内容的访问,因此保持其值很重要。它的问题是,初始化它的控制器,被angular以某种方式再次调用,然后将变量重置回初始值。
我认为这不是声明和初始化全局变量的正确方式,好吧,它并不是真正的全局,所以我的问题是,正确的方式是什么?有没有什么好的例子可以在当前版本的angular中使用?
当前回答
你基本上有2个“全局”变量的选项:
使用$rootScope http://docs.angularjs.org/api/ng.$rootScope 使用服务http://docs.angularjs.org/guide/services
$rootScope是所有作用域的父域,因此在那里暴露的值将在所有模板和控制器中可见。使用$rootScope非常简单,因为您可以简单地将它注入到任何控制器中并更改该范围内的值。它可能很方便,但有全局变量的所有问题。
服务是单例,您可以将其注入到任何控制器,并在控制器的作用域中公开它们的值。服务,作为单例仍然是“全局的”,但你可以更好地控制它们在哪里被使用和公开。
使用服务有点复杂,但也没有那么复杂,这里有一个例子:
var myApp = angular.module('myApp',[]);
myApp.factory('UserService', function() {
return {
name : 'anonymous'
};
});
然后在控制器中:
function MyCtrl($scope, UserService) {
$scope.name = UserService.name;
}
下面是工作的jsFiddle: http://jsfiddle.net/pkozlowski_opensource/BRWPM/2/
其他回答
localStorage.username = 'blah'
如果你用的是现代浏览器的话。尽管知道你的值都将被转换成字符串。
也有方便的好处被缓存之间重新加载。
您还可以使用环境变量$window,以便在控制器外部声明的全局变量可以在$watch内部进行检查
var initWatch = function($scope,$window){
$scope.$watch(function(scope) { return $window.globalVar },
function(newValue) {
$scope.updateDisplayedVar(newValue);
});
}
注意,使用这些全局值时,摘要周期更长,因此并不总是实时更新。我需要研究这个构型下的消化时间。
其实很简单。(如果你使用的是Angular 2+的话。)
简单的添加
declare var myGlobalVarName;
在组件文件顶部的某个地方(例如在“import”语句之后),您将能够在组件中的任何地方访问“myGlobalVarName”。
AngularJS使用$rootScope创建全局变量的例子:
控制器1设置全局变量:
function MyCtrl1($scope, $rootScope) {
$rootScope.name = 'anonymous';
}
控制器2读取全局变量:
function MyCtrl2($scope, $rootScope) {
$scope.name2 = $rootScope.name;
}
这是一个工作的jsFiddle: http://jsfiddle.net/natefriedman/3XT3F/1/
// app.js or break it up into seperate files
// whatever structure is your flavor
angular.module('myApp', [])
.constant('CONFIG', {
'APP_NAME' : 'My Awesome App',
'APP_VERSION' : '0.0.0',
'GOOGLE_ANALYTICS_ID' : '',
'BASE_URL' : '',
'SYSTEM_LANGUAGE' : ''
})
.controller('GlobalVarController', ['$scope', 'CONFIG', function($scope, CONFIG) {
// If you wish to show the CONFIG vars in the console:
console.log(CONFIG);
// And your CONFIG vars in .constant will be passed to the HTML doc with this:
$scope.config = CONFIG;
}]);
在你的HTML中:
<span ng-controller="GlobalVarController">{{config.APP_NAME}} | v{{config.APP_VERSION}}</span>