本文實例講述了AngularJS基于provider實現全局變量的讀取和賦值方法。分享給大家供大家參考,具體如下:
簡單全局變量的設置
1,通過var 直接定義global variable,這根純js是一樣的。
2,用angularjs value來設置全局變量 。
3,用angularjs constant來設置全局變量 。
示例代碼如下:
在app文件中,聲明三種變量
'use strict';/* App Module */var test2 = 'tank';     //方法1,定義全局變量var phonecatApp = angular.module('phonecatApp', [   //定義一個ng-app 'ngRoute', 'phonecatControllers', 'tanktest']);phonecatApp.value('test',{"test":"test222","test1":"test111"}); //方法2定義全局變量phonecatApp.constant('constanttest', 'this is constanttest');  //方法3定義全局變量在controller中對全局變量進行讀取
'use strict';/* 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,賦值 }]);注意事項
var test;設置后,無需在controller聲明的時候注入,直接使用即可。
value和contant,在app中初始化后,需要在controller聲明時候注入到controller中,才能夠使用。
這三種方式都存在一個問題,即只能夠讀取全局變量,無法對全局變量進行修改賦值。在很對業務邏輯中無法滿足業務需求。
使用provider實現全局變量。
步驟與上面的value和contant差不多。
在app中完成聲明和初始化。
<script type="text/javascript">    var app = angular.module('ngRouteWxCtb', ['ngRoute','ngCookies']);    //TODO:provider of globle uid and weixinIsInit param    app.provider('userService', function () {      var data = {uid:0,weixinIsInit:false};      var f = function (uid,weixinIsInit) {        if (uid != 0)        {          data.uid= uid;          data.weixinIsInit = weixinIsInit;        }        return data;      };      this.$get = function () {        return f;      };    });</script>在controller聲明的時候,注入。
app.controller('myCtrl1', function ($scope, userService) {  var data = userService(0, 0, false);//讀取全局變量}));app.controller('myCtrl2', function ($scope, userService) {  var data = userService(123, 111, true);//設置全局變量}));通過provider提供的get方法,實現參數的讀取和賦值。
注意事項
代碼中,我們對provider 的賦值操作進行了取巧設計,當第一個參數等于0的時候,默認是讀取,當第一個參數不為0的時候,實現的是設置后進行讀取。這樣,公用一個get方法即可,無需增加新的方法。
更多關于AngularJS相關內容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答