angularjs 设置全局变量的7种方法

在ng-app或控制器中定义的全局变量，在不同的controller里都可以使用。

1，通过var 直接定义global variable，这根纯js是一样的。

2，用angularjs value来设置全局变量 。

3，用angularjs constant来设置全局变量 。

4，用angularjs rootscope来设置全局变量 。

5、定义服务。

6、$rootScope。

7、定义一个服务 来传 值:

 不同controller之间传值，profile是自定义的一个服务！

 

?

1 2 3 4

.controller( 'a' , function (){      Profile.userNameAll = $scope.user.userName;      Profile.cellphone = $scope.user.phoneNum; })

  

?

1 2 3 4

.controller( 'b' , function (){      $scope.userName = Profile.userNameAll;       $scope.phoneNum = Profile.cellphone; })

下面用一个例子，来说明其中3种方法：

实例：

1，在app模块中，定义全局变量:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

var  test2 =  'tank' ;          //方法1，定义全局变量       var  app = angular.module( 'app' , [      'ngRoute' ,      'phonecatControllers' ,      'tanktest'   ]);       app .value( 'test' ,{ "test" : "test222" , "test1" : "test111" });   //方法2定义全局变量       app .constant( 'constanttest' ,  'this is constanttest' );     //方法3定义全局变量       app .config([ '$routeProvider' ,                 //设置路由      function ($routeProvider) {        $routeProvider.          when( '/phones' , {            templateUrl:  'partials/phone-list.html'       //这里没有设置controller，可以在模块中加上ng-controller          }).          when( '/phones/:phoneId' , {            templateUrl:  'partials/phone-detail.html' ,            controller:  'PhoneDetailCtrl'          }).          when( '/login' , {            templateUrl:  'partials/login.html' ,            controller:  'loginctrl'          }).          otherwise({            redirectTo:  '/login'          });      }]);

2，在controller中调用全局变量

?

1 2 3 4 5 6 7 8 9 10

/* Controllers */       var  phonecatControllers = angular.module( 'phonecatControllers' , []);       phonecatControllers.controller( 'PhoneListCtrl' , [ '$scope' , 'test' , 'constanttest' ,      function ($scope,test,constanttest) {        $scope.test = test;                    //方法2，将全局变量赋值给$scope.test        $scope.constanttest = constanttest;    //方法3，赋值        $scope.test2 = test2;                  //方法1，赋值      }]);

3、结果

?

1 2 3 4 5 6 7

<div data-ng-controller= "PhoneListCtrl" >        {{test.test1}}        {{constanttest}}        {{test2}}   </div>       结果：test111  this  is constanttest tank

其实我们可以通过其他方法来实现全局变量，例如：angularjs factory的功能。