AngularJs:如何访问控制器之外的全局变量?

时间:2013-10-02 13:08:58

标签: javascript angularjs

我试图通过普通函数访问全局变量,是否可能?

我使用$ rootScope设置了一些var,我试图通过回调函数来访问它。 从控制器调用此回调。我不想在回调中传递$rootScope

有没有办法访问$rootScope.var

如果可能,我愿意使用服务。

请建议。

由于

我正在尝试访问rootScope,如下所示:

    function fbLandingCtrl($scope, $rootScope) {
    $rootScope.isFBLoggedin = false;
    $scope.login = function() {
       console.log( $rootScope.isFBLoggedin);
       fbHelper.login(getUserInfo);
      };

      function getUserInfo(){
          fbHelper.getUserInfo(updateStatus);
      }
      function updateStatus(userInfo){
          $rootScope.isFBLoggedin = true;
          console.log( $rootScope.isFBLoggedin);
      }
  }

我的服务如下:

    myapp.factory('FBService', [ '$rootScope', function ($rootScope) {
    $rootScope.isFBLoggedin = false; // global variable
    $rootScope.userName = null;
    $rootScope.userEmail = null;

    return {

        getStatus: function() {
            return $rootScope.isFBLoggedin;
        },
        setStatus: function(status) {
            console.log("Status:"+status);
            return $rootScope.isFBLoggedin = status;
        }
       };
}]);

它在updateStatus fn下显示isFBLoggedin为true,但它没有反映在视图上

我正在打印{{isFBLoggedin}},但是ts显示为

最后它的工作。

我关注了@ dluz的解决方案。

我还使用$rootScope.$apply(function() {}})来渲染视图

2 个答案:

答案 0 :(得分:5)

请不要使用$ rootScope来定义任何功能 - 这是非常糟糕的做法。请记住,$ rootScope毕竟是一个全局变量。

您可以通过以下服务获取$ rootScope:

<!doctype html>
 <html lang="en" ng-app="myApp">
  <head>
<meta charset="UTF-8">
<title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

  <script>

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

      myApp.controller('myAppCtrl', ['$scope', 'myService', function ($scope, myService) {

       console.log(myService.getData());

}])

        myApp.factory('myService', [ '$rootScope', function ($rootScope) {

       return {

        getData: function() {
            return $rootScope;
        }
       };
      }])


    </script>

  </head>
  <body ng-controller="myAppCtrl">

   </body>
   </html>

$rootScope exists, but it can be used for evil

  

Angular中的作用域形成一个层次结构,原型继承自树顶部的根作用域。通常这可以忽略,因为大多数视图都有自己的控制器,因此也有范围。

     

有时,您希望为整个应用程序提供全局数据。对于这些,您可以像任何其他范围一样注入$ rootScope并在其上设置值。由于范围继承自根范围,因此这些值可用于附加到ng-show等指令的表达式,就像本地$ scope上的值一样。

     

当然,全局状态很糟糕,你应该谨慎使用$ rootScope,就像你希望用任何语言的全局变量一样。特别是,不要将它用于代码,只用于数据。如果您想在$ rootScope上添加一个函数,那么将它放在一个可以在需要的地方注入的服务并且更容易测试时几乎总是更好。

     

相反,不要创建一个服务,其唯一目的是存储和返回数据位。

更新的答案

A_J,我不确定你的申请是什么情况。我需要查看更多代码以便为您提供更好的答案,但请查看下面的代码。也许它可以让您了解如何设计代码以访问$rootScope内的service

按“登录我”按钮,查看您的控制台。这里的工作示例(http://jsbin.com/olOyaHa/1/

 <!doctype html>
 <html lang="en" ng-app="myApp">
    <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

 <script>

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

     myApp.controller('fbLandingCtrl', ['$scope', '$rootScope', 'loginService', function ($scope, $rootScope, loginService) {

    $rootScope.isFBLoggedin = false;

    $scope.login = function() {
       console.log('Current login status', $rootScope.isFBLoggedin);

       console.log(loginService.getUserInfo());

       loginService.login(loginService.getUserInfo());

       loginService.updateStatus();
      };


     }]);


     myApp.factory('loginService', [ '$rootScope', function ($rootScope) {

    return {

        login: function() {
            console.log('now I am logged in!');
            return $rootScope.isFBLoggedin = true;
        },

        getUserInfo: function() {
            return {
                username: 'xmen',
                role: 'admin',
                logged: 'false'
            };
        },

        updateStatus: function(userInfo){
            $rootScope.isFBLoggedin = true;
            console.log('Current login status', $rootScope.isFBLoggedin);
        }
        };
     }])


    </script>

 </head>
 <body ng-controller="fbLandingCtrl">
    <button ng-click="login()">Log Me In</button>
 </body>
 </html>

答案 1 :(得分:2)

如果您将$ rootScope添加为控制器参考,则可以在控制器内访问$ rootScope.var:

function MyCtrl($scope, $rootScope, $routeParams /*, ... */)
{
  /* Controller code and callback code here */
}

只要您的回调在控制器内定义,它就会起作用。

编辑:在我们讨论之后,这里是如何在rootScope中定义一个函数:

yourApp.run($rootScope/*, ResourceProvider ... */) {
    $rootScope.yourFunction= function () {
        /* The code of you functions */
    }
}