首页 文章

AngularJS中的全局变量

提问于
浏览 次
334

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

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

angularjs global-variables

12 回答

  • 24

    你也可以这样做..

    function MyCtrl1($scope) {
    $rootScope.$root.name = 'anonymous'; 
}

function MyCtrl2($scope) {
    var name = $rootScope.$root.name;
}
    回复于
  • -2

    我错误地找到了另一种方法：

    我做的是声明一个 var db = null 以上的app声明，然后在 app.js 中修改它然后当我访问它时 controller.js 我能够毫无问题地访问它 . 这个方法可能存在一些问题我认为这是一个很好的解决方案 .

    回复于
  • 0

    试试这个，你不会强制在控制器中注入 $rootScope .

    app.run(function($rootScope) {
    $rootScope.Currency = 'USD';
});

    您只能在运行块中使用它，因为配置块不会为您提供$ rootScope的服务 .

    回复于
  • 19

    这实际上非常简单 . （如果你正在使用Angular 2 . ）

    只需添加

    declare var myGlobalVarName;

    在组件文件顶部的某处（例如在“import”语句之后），您将能够在组件内的任何位置访问“myGlobalVarName” .

    回复于
  • 477

    你有“全局”变量的两个选项：

    $rootScope 是所有范围的父级，因此在其中公开的值将在所有模板和控制器中可见 . 使用 $rootScope 非常简单，因为您只需将其注入任何控制器并更改此范围内的值即可 . 它可能很方便，但有problems of global variables .

    服务是可以注入任何控制器并在控制器范围内公开其值的单例 . 作为单身人士的服务仍然是“全球性的”，但你可以更好地控制那些被使用和暴露的地方 .

    使用服务有点复杂，但不是那么多，这是一个例子：

    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/

    回复于
  • 90

    如果您只想存储一个值，根据Angular documentation on Providers，您应该使用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 ，但是's not really an option because you shouldn' t使用它是出于同样的原因你应该谨慎使用't use global variables in other languages. It' s advised .

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

    如果要修改此值并使其在所有控制器中保持不变，请使用对象并修改属性，并记住Javascript是否通过"copy of a reference"：

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

    JSFiddle example

    回复于
  • 34

    使用 $rootScope 的AngularJS "global variables"示例：

    控制器1设置全局变量：

    function MyCtrl1($scope, $rootScope) {
    $rootScope.name = 'anonymous'; 
}

    控制器2读取全局变量：

    function MyCtrl2($scope, $rootScope) {
    $scope.name2 = $rootScope.name; 
}

    这是一个有效的jsFiddle：http://jsfiddle.net/natefriedman/3XT3F/1/

    回复于
  • 6

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

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

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

    例如：

    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 上放置运行时配置项太乱了，太快了 .

    回复于
  • 2
    // 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>
    回复于
  • 6

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

    回复于
  • 0
    localStorage.username = 'blah'

    如果您保证使用现代浏览器 . 虽然知道你的 Value 观将全部变成字符串 .

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

    回复于
  • 0

    您还可以使用环境变量 $window ，以便在控制器外部声明的全局变量可以在 $watch 内查看

    var initWatch = function($scope,$window){
    $scope.$watch(function(scope) { return $window.globalVar },
        function(newValue) {
            $scope.updateDisplayedVar(newValue);
    });
}

    很奇怪，这些全局值的摘要周期更长，因此并不总是实时更新 . 我需要使用此配置调查该摘要时间 .

    回复于

相关问题