在 AngularJS 上使用 'global' 变量

Question

好吧，我和一位同事就如何在 AngularJS 上正确使用全局变量进行了激烈的争论。这是他的推理："do" 有很多方法。

考虑一下：

var app = angular.module('myApp', []);

app.globalVar = []; // this is just to store same data later

然后在一些 directive/service:

app.directive('myDirective', function(){
    app.globalVar = [23,43,21]; // populating from a json or other source
});

app.directive('myDirective2', function(){
    var x = app.globalVar;
});

我认为这很糟糕，但我想从技术角度了解为什么这是错误的，以及 AngularJS.

中 'global' 变量的正确用法是什么

我读到了有关使用 $rootScope 的信息，我还在某个地方读到 2.0 版 AngularJS 正在删除 $scope altogheter 所以也许唯一的方法是使用 service/factory?

Answer 1

一般我不使用全局变量。它们会污染 window 作用域，并使您的代码更加混乱。对于您提供的示例，我建议使用工厂或服务来保存数据。然后你可以把它清楚地注入到你想要的任何 controller/direct/other-service 中。虽然您的同事是正确的，有很多方法可以做事，但我不建议污染全局范围。

app.
 module('myApp')
 .factory('myFactory', myFactory);

function myFactory() {
  var globalVar = [23,43,21];

  return {
    get: function() {
      return globalVar;
    }
  }
}

然后在你的控制器（或其他）中

app.
  module('myApp')
  .controller('MyCtrl', MyCtrl);

  function MyCtrl(myService) {
    var localVar = myService.get();
  }

Answer 2

以下是我在设计时遵循的一些约定

一个。 全局变量- 将变量附加到 $rootscope，然后您可以在任何子 $scope 中使用该变量。此外，您甚至可以跨控制器监听根作用域上的事件。提示：避免这种情况，因为您最终可能会在 rootscope 和 listeners 上有太多变量分布在控制器上。

b。 Angular 服务- 当你想在两个或多个控制器之间共享数据时使用它。这是 access/share 数据的最佳方式。

c。 Angular Factory - 与服务非常相似，但使用它来存储静态数据，例如基本 url、api 键、视图之间的按钮状态等

d。 Angular Controller - 尽量让您的控制器保持最少的编码和业务逻辑。只是，路由和基本绑定应该在控制器中完成。

希望对你的论证有所帮助。 :)

Answer 3

使用全局变量的好方法

Angular 服务：

(function () {

var userService = function () {

    var getGlobalVar = function () {
        var globalVar = [23, 43, 21];
    };
    return {
        globalVar: globalVar
    };
};
var mod = angular.module("myApp");
mod.factory("userService", userService);
}());

Angular 控制器：

app.controller("MyCtrl",['userService' function (userService) {

var test = userService.getGlobalVar();
}]);

在 AngularJS 上使用 'global' 变量

The use of 'global' variables on AngularJS

javascript

angularjs

angularjs-directive

angularjs-service

angularjs-scope