Firebaseログインの成功後にng-show/hideが動作しない

Question

Firebaseログインが成功した後、ng-show/hideの問題が発生しました。

app.run(function($rootScope){ 
    $rootScope.loggedIn = false; 
    console.log("loggedIn", $rootScope.loggedIn); 
}); 

そしてそうのように、私のログインコントローラで$ rootScopeを注入しています：私は2つのログイン機能をテストしているところでそれと

app.controller("loginCtrl", ['$scope', '$rootScope', '$firebaseObject', function($scope, $rootScope, $firebaseObject){.... 

を次のように私は$ rootScopeにLOGGEDIN変数を持っています。最初のものはダミーで、Firebase認証プロセスを実際には通過しませんが、ビュー内の関連要素を表示/非表示します。

2つめはFirebase authを通過し、最初のダミー機能とまったく同じ$rootScope.loggedIn = trueを記録します。しかし、show/hideは機能しません。ここで

 // This works 
     $scope.logIn = function(){ 
       $rootScope.loggedIn = true; 
       console.log("loggedIn", $rootScope.loggedIn); 
     } 

     // This doesn't work 
     // logs into Firebase fine but ng-show/hide doesn't work 
     $scope.logIn = function(){ 
      ref.authWithPassword({ 
        email : $scope.user.email, 
        password : $scope.user.password 
       }, 
       function(error, authData) { 
        if (error) { 
        console.log("Login Failed!", error); 
        } else { 
        console.log("Authenticated successfully with payload:", authData); 
        // NEED TO FIX!!! 
        $rootScope.loggedIn = true; 
        console.log("loggedIn", $rootScope.loggedIn); 
        } 

      }); 
     } 

はHTMLでNG-表示/非表示です

<div class="login" ng-hide="loggedIn" ng-controller="loginCtrl"> 
    <form class="form-signin"> 
     <h2 class="form-signin-heading">Please sign in</h2> 
     <label for="inputEmail" class="sr-only">Email address</label> 
     <input type="email" id="inputEmail" class="form-control" placeholder="Email address" ng-model="user.email" required autofocus> 
     <label for="inputPassword" class="sr-only">Password</label> 
     <input type="password" id="inputPassword" class="form-control" placeholder="Password" ng-model="user.password" required> 
     <div class="checkbox"> 
     <label> 
      <input type="checkbox" value="remember-me"> Remember me 
     </label> 
     </div> 
     <button class="btn btn-lg btn-primary btn-block" ng-click="logIn()">Sign in</button> 
    </form> 
    </div><!-- ./login form --> 

    <!-- main page container --> 
    <div class="container" ng-controller="myCtrl"> 

     <div class="main-content" ng-show="loggedIn"> 
      <h1>{{ pageTitle }}</h1> 
      <hr> 
      <div id="successNotice" class="alert alert-success" role="alert" ng-show="savedSuccess"> 
       Musician saved successfully! 
      </div> 
      <table class="table table-striped"> 
       <thead> 
        <tr> 
         <label>Enter the name of your favourite musician</label> 
         <br> 
         <th> 
          <input class="form-control" placeholder="First Name" ng-model="dev.firstName" name="firstName"> 
         </th> 
         <th> 
          <input class="form-control" placeholder="Last Name" ng-model="dev.lastName" name="lastName"> 
         </th> 
         <th> 
          <button class="btn btn-success pull-right" > 
           <span class="glyphicon glyphicon-plus" ng-click="add(dev)"></span> 
          </button> 
         </th> 
        </tr> 
       </thead> 
      <thead> 
       <tr> 
       <th>Firstname</th> 
       <th>Lastname</th> 
       </tr> 
      </thead> 
       <tbody> 
        <tr ng-repeat="musician in musicians"> 
         <td>{{ musician.firstName }}</td> 
         <td>{{ musician.lastName }}</td> 
         <td> 
          <button class="btn btn-danger pull-right" ng-click="remove($index)"> 
           <span class="glyphicon glyphicon-remove"></span> 
          </button> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div><!-- ./main-content --> 

私はそれはおそらく、このタスクを実行する最善または最も安全な方法はありません知っていると行くより分離し、派手なルーティングがあるはずですに。しかし、私はちょうどより良い角度の練習を使用してビジネスロジックをリファクタリングする前に概念の証明としてそれをテストしたいと思っていました。今のところ私はなぜこれがうまくいかないかを知りたいのですが。ありがとう！

Answer 1

$scopeに$rootScope.loggedInを公開する必要があると思います（私は間違っている可能性があるため）。私は$ rootScope変数がHTML /テンプレートに公開されていないと確信しています。コントローラに注入されたため、$scopeのみがHTMLに公開されているため、$scope変数を操作する必要があります。お使いのコントローラでこれを追加すること

試してみてください。

$scope.loggedIn = $rootScope.loggedIn 

$scope.loggedIn変数は、それがあなたのng-showとng-hideで使用できるHTMLに公開されます。ここでは、値を$rootScope.loggedInからコピーしています。