У меня проблема с тем, что ng-show/hide не работает после успешного входа в Firebase. У меня есть переменная loggedIn в $ rootScope следующим образом:
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);
}
});
}
Вот ng-show/hide в HTML
<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 -->
Я знаю, что это, вероятно, не лучший и не самый безопасный способ выполнения этой задачи, и должно быть больше разделения и причудливой маршрутизации. Но я просто хотел протестировать его в качестве доказательства концепции перед рефакторингом бизнес-логики с использованием лучших практик Angular. На данный момент я хотел бы знать, почему это не работает. Спасибо!
