如何在单个控制器中创建全局变量并在Angularjs中调用工厂内部的函数

时间:2015-08-05 11:32:42

标签: angularjs

我想创建一个可以在同一个控制器中访问的全局变量。我想数据变量应该是全局的,以便我可以从控制器内的任何地方访问它。我的代码是: -

var enterprise = angular.module('EnterpriseCtrl',[]);
    enterprise.controller('EnterpriseController',function($scope,$routeParams,$http,$location,Enterprise){

    $scope.enterpriseSubmit = function(){
             $scope.enterprise.sector_id = $scope.enterprise.select_sector.id;
             var f = document.getElementById('file').files[0],
              reader = new FileReader();
              reader.onloadend = function(e){
              var data  = e.target.result;
               }
              reader.readAsBinaryString(f);
              var enterprise = Enterprise.insert($scope.enterprise,$rootScope.file);
                enterprise.success(function(response){
                   if(response.data !=""){
                         $location.path('/enterprises');
                   }else alert('Data not saved.');
                });
        };

    });

第二件事是,当我获得成功响应后,我们可以在 enterprise.success函数中发送另一个$ http.post请求。这样的事情: -

enterprise.success(function(response){
   if(response.data !=""){
       $http.post("http://5.17.18.10:3030/api/login",{status:'1'}).success(function (response) 
          {
              console.log(response);
           });
          $location.path('/enterprises');
     }else alert('Data not saved.');

3 个答案:

答案 0 :(得分:0)

控制器具有范围,因此在控制器中定义变量使其可在该控制器中的任何位置访问。全局变量意味着它也可以在其他控制器中访问。因此,我不确定您是否希望在控制器范围内拥有全局变量或变量。如果您想在视图中使用变量(例如使用ng-model),您可以将变量定义为$scope.data

您在函数中定义了var data,如果您希望它在函数外部可访问,则应首先在控制器中声明var data然后使用该变量(不重新声明) )在你的功能。

关于另一篇文章成功功能的帖子的另一个问题,是的,可以做到。在问之前你试过吗? :-)而不是.success()你可能想要使用.then(),但为了参考,你可以阅读this。可能发生的唯一问题是,帖子是异步完成的。因此,它可能不会按照您希望返回的顺序返回数据。 (因为调用初始帖子的代码将在异步执行帖子时继续)。

我希望这能回答你的问题。

<强>更新 您可以使用$rootScope,但这不是最佳做法。最佳实践是将变量存储在工厂或服务中(如其他答案中所述,服务是您想要在其他控制器中访问的变量的方法),然后在成功函数中调用变量。

答案 1 :(得分:0)

要使变量data全局化,并将其访问为不同的控制器,您应该服务。为什么?由于服务是单身人士,因此他们共享相同的实例。

<强>服务

(function(){

  function Service(){

    var data = '';

    this.set = function(d){
      data = d;
    }

    this.get = function(){
      return data;
    }

  }

  angular
    .module('app')
    .service('Share', Service);

})();

控制器1

(function(){

function Controller($scope, Share) {

  $scope.data = 3;

  Share.set($scope.data);

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

控制器2

(function(){

function Controller($scope, Share) {

  console.log(Share.get())

}

angular
.module('app')
.controller('ctrl2', Controller);

})();

答案 2 :(得分:0)

@Paul Boutes的例子很好。为了进一步扩展它,它的全局性是因为它是一个单例,它可以注入任何其他模块/服务/工厂。此外,您可能希望使用最小安全语法来确保代码可以毫无问题地缩小。

在任何情况下,Angular都允许您创建一个模块并在任何其他服务或工厂中需要它,如下所示 module.b在angular.module行上的数组中需要module.a

  

使用-AS-global.js

(function () {
    'use strict';
    angular.module('module.a', [])
            .service('UseAsGlobal', function () {
                this.foo = 'foo';
            });
})();
  

一些-module.js

(function () {
'use strict';
angular.module('module.b', ['module.a'])
        .controller('SomeController', ['$scope', 'UseAsGlobal', function($scope, UseAsGlobal) {
            $scope.doSomethingWithFoo = function() {
                console.log('this is UseAsGlobalsFoo ', UseAsGlobal.foo);
            };

            $scope.changeFoo = function() {
                UseAsGlobal.foo = 'bar';
            };
        }])
        .service('SomeService', ['UseAsGlobal', function (UseAsGlobal) {
            this.sayFoo = function () {
                console.log(UseAsGlobal.foo);
            };
        }]);

})();