无法访问从一个控制器绑定到$ rootScope的authData

Question

我有一个错误导致我疯了，基本上我所要做的就是设置一个$rootScope.authData属性，该属性持有用户的身份验证信息我可以在不同的控制器中使用它。

但是，当我尝试这个，它只是给了我一个错误，说$rootScope.authData没有定义。我已经检查过，当它从mainCtrl登录到控制台时确实定义了它，但在从tagsCtrl将它登录到控制台时确实是undefined。

这是奇怪的考虑的事实，我可以在我的其他控制器的一个使用$rootScope.authData ..同时我，如果我在mainCtrl和控制台日志添加$rootScope.test = 'testing'，在tagsCtrl它的工作原理。

我看不出我在这里完成的任何错误，并且我已经到了死胡同。有任何想法吗？

主控制器，设置$rootScope.authData：

flickrApp.controller('tagsCtrl', ['$scope', '$rootScope', '$firebase', function($scope, $rootScope, $firebase) { 

console.log($rootScope.authData); //Is not defined here 

}]); 

编辑：

flickrApp.controller('mainCtrl', ['$scope', '$rootScope', '$firebase', 'Auth', function($scope, $rootScope, $firebase, Auth) { 

    Auth.$onAuth(function(authData) { 
     $rootScope.authData = authData; 
     console.log($rootScope.authData); //Is defined here 
    }); 
}]); 

无法访问$rootScope.authData控制器从Bricktop一些反馈后，我试图创建一个服务对此，结果如下：

flickrApp.service('shared', ['$scope', 'Auth', function($scope, Auth) { 

    //Auth is a wrapper that points to my firebase reference 

    Auth.$onAuth(function(authData) { 
     return $scope.authData = authData; 
    }); 
}]); 

我不知道这是否会是一个有效的但现在看来，这不是因为我得到这个错误：

Error: [$injector:unpr] http://errors.angularjs.org/1.3.10/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20shared 
at Error (native) 
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:6:417 
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:38:307 
at Object.d [as get] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:36:308) 
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:38:381 
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:36:308) 
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:37:64) 
at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:37:213) 
at Object.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:37:490) 
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:37:96) 

我注入这样的：

flickrApp.controller('tagsCtrl', ['$scope', '$firebase', 'shared', function($scope, $firebase, shared) { 

    console.log($scope.authData.uid); //This would come from the 'shared' service now 
}]); 

什么是错在这里？

Answer 1

以上answer解释了为什么它可能不工作，但我会建议您以不同的方式解决您的问题（控制器之间共享变量）。

您应该改为创建一个服务（类似于“共享”）并共享数据。这是可行的，因为服务是单身而控制器不是。此外，即使您不需要它们，您也不会将变量添加到您的Rootcope中，这些变量将随身携带。

看到这样的共享服务检查的一个很好的例子here.

这是我的例子应该为你的榜样工作：

首先共享服务：

flickrApp.service('shared', function() { 

    var authentication = 'none'; 

    return { 
     getAuth: function() { 
       return authentication; 
     }, 
     setAuth: function (auth) { 
      authentication = auth; 
     } 
    }; 
}); 

我喜欢保持这种共享服务不受所有逻辑干扰，并仅用于共享数据。

接下来是主控制器，您必须确保在登录后调用任何其他控制器之前实际调用了此控制器（因此，您可以将其放入控制器中，以便处理登录！）

flickrApp.controller('mainCtrl', ['$scope', '$firebase', 'shared', 'Auth', function($scope, $firebase, Auth, shared) { 

    Auth.$onAuth(function(authData) { 
     shared.setAuth(authData); 
     console.log(shared.getAuth()); //Check if it was set correctly 
    }); 
}]); 

最后需要检查登录状态的任何其他控制器：

flickrApp.controller('tagsCtrl', ['$scope', '$firebase', 'shared', function($scope, $firebase, shared) { 
    $scope.auth = shared.getAuth(); 
    if($scope.auth === 'none'){ 
     console.log('you are not logged in!'); 
    }else{ 
     console.log('welcome '+$scope.auth.uid); 
     //anything you would do if a user is logged in 
    } 
}]); 

我假设你知道下面的，但我只是去重复这个（我不熟悉的火力点）：

请务必注意，JavaScript代码可以由恶意用户操纵，请确保您发送的每个http请求都发送给您的服务器以确保用户实际登录并且不依靠javascript为你做这个。

如果您有任何其他问题，请让我知道。

Answer 2

这里是通过共享服务和范围的共享数据的一个简单的例子

JS

(function(app) { 

    function SharedService() { 
     this.user = {}; 
    } 

    function Controller1(scope, SharedService) { 
     scope.sharedService = SharedService; 
    } 

    function Controller2(scope, SharedService) { 
     scope.sharedService = SharedService; 
    } 

    app.service('SharedService', SharedService); 
    app.controller('Controller1', Controller1); 
    app.controller('Controller2', Controller2); 

})(angular.module('myApp', [])); 

HTML

<script src="https://code.angularjs.org/1.3.4/angular.js"></script> 
<script type="text/javascript" src="js/exp2/app.js"></script> 
<div ng-app="myApp"> 
    <div ng-controller="Controller1 as ctrl"> 
     </br> 
     <table> 
      <tr> 
       <td><B> Enter Age in Controller1</B></td> 
       <td><input type="text" ng-model="ctrl.userAge"></select></td> 
      </tr> 
     </table> 
    </div> 
    <div ng-controller="Controller2 as ctrl"> 
     <table> 
      <tr> 
       <td><B> Age in controller2 : </B></td> 
       <td>{{ctrl.userAge}}</td> 
      </tr> 
     </table> 
    </div> 
</div> 

参考以下链接了解如何共享数据没有使用任何类型的范围。 http://plnkr.co/edit/den1mfMeIAWezLTuVZVX?p=preview