在AngularJS上使用'global'變量

Question

好的，我和一位同事就如何在AngularJS上正確使用全局變量的方式進行了激烈的辯論。 這是他的理由：有很多方法可以“做”事情。

考慮一下：

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

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

然后在一些指令/服務上：

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中正確使用“全局”變量的方法。

我讀到有關使用$ rootScope的信息，並且我還讀到某個地方，在2.0版中，AngularJS放棄了$ scope altogheter，所以也許唯一的方法是使用服務/工廠？

Answer 1

通常，我不使用全局變量。 它們污染了窗口范圍，會使您的代碼更加混亂。 對於您提供的示例，我建議您使用工廠或服務來保留數據。 然后，您可以將其清楚地注入到所需的任何控制器/直接/其他服務中。 盡管您的同事是對的，但是有很多方法可以解決問題，但我不建議您污染全局范圍。

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上監聽事件。 提示 ：避免這種情況，因為您可能在rootscope上包含太多變量，並且listeners分散在各個控制器上。

b。 Angular Service-當您要在兩個或多個控制器之間共享數據時，請使用此功能。 這是訪問/共享數據的最佳方法。

C。 Angular Factory-與Service非常相似，但是可以使用它來存儲靜態數據，例如基本url，api鍵，視圖之間的按鈕狀態等。

d。 Angular Controller-嘗試使您的控制器保持最少的編碼和業務邏輯。 僅路由和基本綁定應在控制器中完成。

希望對您的論點有所幫助。 :)

Answer 3

使用全局變量的好方法

角服務：

(function () {

var userService = function () {

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

角度控制器：

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

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