無法訪問從一個控制器綁定到$ 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