AngularJS中的全局变量

Question

我有一个问题,我在控制器中的范围初始化变量.然后在用户登录时在另一个控制器中进行更改.此变量用于控制导航栏等内容,并根据用户类型限制对站点部分的访问,因此保持其值非常重要.它的问题在于初始化它的控制器,通过角度再次调用,然后将变量重置为其初始值.

我认为这不是声明和初始化全局变量的正确方法,它不是真正的全局变量,所以我的问题是什么是正确的方法,是否有任何关于使用当前版本的角度工作的好例子？

Answer 1

你有"全局"变量的两个选项:

• 使用$rootScope http://docs.angularjs.org/api/ng.$ro​​otScope
• 使用服务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/

Answer 2

如果您只想存储一个值,根据Providers上的Angular文档,您应该使用Value配方:

var myApp = angular.module('myApp', []);
myApp.value('clientId', 'a12345654321x');

然后在这样的控制器中使用它:

myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
    this.clientId = clientId;
}]);

使用Provider,Factory或Service可以实现同样的目的,因为它们"只是提供者食谱之上的语法糖",但使用Value将以最少的语法实现您想要的.

另一种选择是使用$rootScope,但它不是一个真正的选项,因为你不应该使用它,原因与你不应该在其他语言中使用全局变量相同.它建议要谨慎使用.

由于所有范围都继承自$rootScope,如果您有一个变量$rootScope.data并且有人忘记data已经定义并$scope.data在本地范围内创建,您将遇到问题.

如果要修改此值并使其在所有控制器中保持不变,请使用对象并修改属性,记住Javascript通过"引用副本":

myApp.value('clientId', { value: 'a12345654321x' });
myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
    this.clientId = clientId;
    this.change = function(value) {
        clientId.value = 'something else';
    }
}];

JSFiddle示例

Answer 3

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/

Answer 4

为了向wiki池添加另一个想法,但是AngularJS value和constant模块呢？我自己只是开始使用它们,但听起来像这些可能是最好的选择.

注意:截至撰写本文时,Angular 1.3.7是最新的稳定版,我相信这些是在1.2.0中添加的,虽然没有用changelog证实这一点.

根据您需要定义的数量,您可能希望为它们创建单独的文件.但我通常在我的应用程序.config()块之前定义这些以便于访问.因为这些仍然是有效的模块,所以您需要依赖依赖注入来使用它们,但它们被视为应用程序模块的"全局".

例如:

angular.module('myApp', [])
  .value('debug', true)
  .constant('ENVIRONMENT', 'development')
  .config({...})

然后在任何控制器内:

angular.module('myApp')
  .controller('MainCtrl', function(debug, ENVIRONMENT), {
    // here you can access `debug` and `ENVIRONMENT` as straight variables
  })

从最初的问题来看,实际上听起来像静态属性无论如何都需要,无论是可变(值)还是最终(常量).这是我个人的意见,而不是其他任何东西,但我发现将运行时配置项放在$rootScope太乱,太快.

Answer 5

// 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>

Answer 6

localStorage.username = 'blah'

如果您保证使用现代浏览器.虽然知道你的价值观都会变成字符串.

还有重新加载之间缓存的便利好处.

Answer 7

如果我错了请纠正我,但是当Angular 2.0发布时,我不相信$rootScope会出现这种情况.我的猜想是基于$scope被删除的事实.显然控制器仍然存在,只是不是ng-controller时尚.转而将控制器注入指令.随着即将发布,如果您希望更轻松地从verison 1.X切换到2.0,最好将服务用作全局变量.