zoukankan      html  css  js  c++  java
  • AngularJS中的全局变量设置之value vs constant vs rootscope vs 服务

     AngualrJS中设置全局变量,即每个Controller中都可以访问的变量,主要有以下几种方法:

    1、通过var 直接定义global variable,相当于直接用js

    2.、用angularjs rootscope来设置全局变量 。

    3、用angularjs value来设置全局变量 。

    4、用angularjs constant来设置全局变量 。

    5、定义服务传值

     这里第1种很简单,不说。下面从第2-5来说说

    一、angularjs rootscope来设置全局变量

      像使用rootscope,笔者的建议是放在run中,这里其这controller中都不用引入rootscope,直接使用需要的全局变量就可以了。

    appCommon.run(function($rootScope) {  
        $rootScope.paginationConf = {  
            currentPage : 1, // 分页开始  
            itemsPerPage : 15, // 分页每页显示条数   
        };  
    })  

    然后,其它Controller要用,直接

        app.controller('merchantController', function($scope) {  
                var   limit = $scope.paginationConf.itemsPerPage;  
                var   pageIndex  = $scope.paginationConf.currentPage;  
    
               .......................................  
        }) 

    这里需要注意的是,每个Controller层都会先在当前的scope找需要的变量,找不到,再到rootscope上去寻找。如果还是找不到,就会报错。

    二、用angularjs value来设置全局变量

    使用实例如下:

    <!DOCTYPE html>  
    <html lang="zh" ng-app="myApp">  
      
    <head>  
        <meta charset="UTF-8">  
        <title>AngularJS学习</title>  
        <script type="text/javascript" src="./1.5.3/angular.min.js"></script>  
    </head>  
      
    <body>  
        <div ng-controller="myCtrl1">  
            <button ng-click="onclick1()">请点击我1</button>  
            {{value1}}  
        </div>  
        <div ng-controller="myCtrl2">  
            <button ng-click="onclick2()">请点击我2</button>  
              {{value2}}  
        </div>  
    </body>  
    <script type="text/javascript">  
    var app = angular.module('myApp', []);  
    app.value('myValue',{"value1":"林炳文","value2":"hello world",value3:1});    
    app.controller('myCtrl1', function($scope,myValue) {  
        $scope.onclick1 = function() {  
           $scope.value1 = myValue.value1 + (++myValue.value3);  
       };  
    });  
    app.controller('myCtrl2', function($scope,myValue) {  
        $scope.onclick2 = function() {  
           $scope.value2 = myValue.value2 +  (++myValue.value3);  
       };  
    });  
    </script>  
    </html> 

    效果:

    三、用angularjs constant来设置全局变量

    使用实例:

        <!DOCTYPE html>  
        <html lang="zh" ng-app="myApp">  
          
        <head>  
            <meta charset="UTF-8">  
            <title>AngularJS学习</title>  
            <script type="text/javascript" src="./1.5.3/angular.min.js"></script>  
        </head>  
          
        <body>  
            <div ng-controller="myCtrl1">  
                <button ng-click="onclick1()">请点击我1</button>  
                {{value1}}  
            </div>  
            <div ng-controller="myCtrl2">  
                <button ng-click="onclick2()">请点击我2</button>  
                  {{value2}}  
            </div>  
        </body>  
        <script type="text/javascript">  
        var app = angular.module('myApp', []);  
        app.constant('myConstant',{"value1":"林炳文","value2":"hello world",value3:1});    
        app.controller('myCtrl1', function($scope,myConstant) {  
            $scope.onclick1 = function() {  
               $scope.value1 = myConstant.value1 + (++myConstant.value3);  
               myConstant.value1 = $scope.value1;  
               myConstant.value2 = $scope.value1;  
           };  
        });  
        app.controller('myCtrl2', function($scope,myConstant) {  
            $scope.onclick2 = function() {  
               $scope.value2 = myConstant.value2 +  (++myConstant.value3);  
                myConstant.value1 = $scope.value2;  
                myConstant.value2 = $scope.value2;  
           };  
        });  
        </script>  
        </html>  

    效果:

    value与constant区别

    value不可在config里注入,constant可以。下面是笔者做的一个测试

    app.constant('myConstant',{"value1":"林炳文","value2":"hello world",value3:1});    
    app.value('myValue',{"value1":"林炳文","value2":"hello world",value3:1});   

    然后在config来引入:

        app.config(function(myValue){  
        ..  
        });  

    报错如下:

    如果使用

        app.config(function(myConstant){  
        //可以得到constant定义的'myConstant'  
        });  

    一切正常

    四、定义服务传值

    这是java中最常用的方法了,其实就相当于定义一个对象的服务中,并设置get/set方法。通过这两个方法来实时更新与获取数据

        <!DOCTYPE html>  
        <html lang="zh" ng-app="myApp">  
        <head>  
            <meta charset="UTF-8">  
            <title>AngularJS入门学习</title>  
            <script type="text/javascript" src="./1.5.3/angular.min.js"></script>  
        </head>  
        <body>  
             <div ng-controller="childCtrl1">  
                {{name}}  
                <button ng-click="setName()">set name to jack jack jack</button>  
             </div>  
             <div ng-controller="childCtrl2">  
                {{name}}  
                <button ng-click="setName()">set name to tom tom tom</button>  
             </div>  
        </body>  
        <script type="text/javascript">  
        var app = angular.module('myApp', []);  
        app.factory('dataService', function() {  
          var name = '我是林炳文';  
          var service = {};  
          service.getName = function() {  
            return name;  
          };  
          service.setName = function(newName) {  
             name = newName;  
          };  
          return service;  
        });  
        app.controller('childCtrl1', function($scope,dataService) {  
            $scope.name = dataService.getName();  
            $scope.setName = function() {  
                  dataService.setName( "set name to jack jack jack");  
                   $scope.name = dataService.getName();  
            };  
        });  
        app.controller('childCtrl2', function($scope,dataService) {  
               $scope.name = dataService.getName();  
               $scope.setName = function() {  
                dataService.setName( "set name to tom tom tom");  
                  $scope.name = dataService.getName();  
            };  
        });  
        </script>  
        </html>  

    效果:

    一、angularjs rootscope来设置全局变量

  • 相关阅读:
    计算一个数的逆序数的个数(1)
    Javascript DOM(2)
    python 装饰器
    Javascript DOM
    Javascrip 入门第三节课
    C# sapnco支持.net 4.5了,真是个意外的发现
    uft调用rfc接口
    pyqt常用窗口组件
    python QQTableView中嵌入复选框CheckBox四种方法
    Pygame模块,功能表
  • 原文地址:https://www.cnblogs.com/i-want-to-be-like-an-sun/p/7590997.html
Copyright © 2011-2022 走看看