AngularJS中的全局变量

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

我认为这不是正确的方式来声明和初始化全局变量,它并不是真正的全局变量,所以我的问题是什么是正确的方式,并且是否有与当前版本的角度有关的工作的良好范例?


基本上有2个“全局”变量选项:

  • 使用$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/


    如果你只是想存储一个值,根据提供者的Angular文档,你应该使用Value配方:

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

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

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

    使用提供者,工厂或服务可以达到同样的效果,因为它们“仅仅是提供者配方上的语法糖”,但使用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示例


    使用$rootScope的AngularJS“全局变量”示例:

    控制器1设置全局变量:

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

    控制器2读取全局变量:

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

    这里是一个工作jsFiddle:http://jsfiddle.net/natefriedman/3XT3F/1/

    链接地址: http://www.djcxy.com/p/43377.html

    上一篇: Global variables in AngularJS

    下一篇: Haskell: Lists, Arrays, Vectors, Sequences