성공적인 Firebase 로그인 후 ng-show/hide가 작동하지 않습니다.

Question

Firebase 로그인 성공 후 ng-show/hide 문제가 발생했습니다. 나는 다음과 같이 $ rootScope에서 loggedIn 변수가 :

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

을 그리고처럼 내 로그인 컨트롤러에서 $ rootScope을 주입 한 : 나는이 개 로그인 기능을 테스트 한 장소에두고

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

. 첫 번째 파일은 더미 파일이며 실제로 Firebase 인증 프로세스를 거치지 않지만 뷰의 관련 요소를 표시하거나 숨 깁니다.

두 번째는 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/템플릿에 노출되지 않았기 때문입니다. $rootScope을 입력 했으므로 컨트롤러에서 사용할 수 있지만 $scope 만 HTML에 노출되어 있기 때문에 $scope 변수를 조작해야합니다. 컨트롤러에이 추가

시도 :

$scope.loggedIn = $rootScope.loggedIn 

$scope.loggedIn 변수가 ng-show 및 ng-hide하여 사용할 수있는 HTML에 노출됩니다. 여기서는 $rootScope.loggedIn의 값을 복사하는 것입니다.