Question

我在我的网络应用上使用Firebase进行身份验证。如果管理员已登录，我只会在不同的页面上显示按钮。我一直试图在按钮上使用ng-if来显示loggedin = true。我控制台记录了“已登录”的说明。它似乎正在改变，但按钮根本不显示。

我无法弄清楚这里发生了什么。我已经查看了有关$ scope，ngIf和ngShow指令的角度文档，但没有任何内容可以帮助我。我还回顾了this StackOverflow post，它首先显示了这个过程的来源。它似乎在那个线程中为人们工作，但对我来说并不高兴。

这是我的控制器中的代码：

app.controller('welcomeCtrl', function ($scope, welcomeData, $routeParams, $location) {

var ref = new Firebase('https://mywebapp.firebaseio.com/');

  //authentication check
  var auth = new FirebaseSimpleLogin(ref, function (error, user) {
    if (error) {
      // an error occurred while attempting login
      console.log(error);
    }
    // no user logged in
     else if (user === null) {
      console.log("Not logged in");
    }
    // normal user logged in
    else if (user.id !== "47f0b82c-59d2-4bcd-8arc-ecb438eb0163") {
      console.log("You are logged in as normal user");
    }
    // admin logged in
    else {
      console.log("Logged in as admin");
      $scope.loggedin = true;
      console.log("logging the scope.loggedin as admin " + $scope.loggedin);
    }
  });

  $scope.loggedin = false;
  console.log("logging scope.loggedin " + $scope.loggedin);

  var authCheck = function () {
    console.log("logging the scope in authCheck " + $scope.loggedin);
    return auth.user !== null;
  };
  authCheck();

这是一个似乎没有适当改变的HTML元素：

<div ng-show="loggedin">
  <a class="btn waves-effect waves-red" ng-href="/#/editWelcome/{{welcome._id}}">Update
  </a>
</div>

知道我做错了什么吗？谢谢你的帮助。

Answer 1

首先，不推荐使用FirebaseSimpleLogin。 auth方法现在是核心Firebase库的一部分。您可以使用onAuth回调进行实施。

您没有看到$scope.loggedin值更改的原因是因为Firebase的回调发生在Angular的摘要范围之外。您需要使用$scope.$evalAsync()或Firebase自己的AngularFire库告知Angular此更改。

要使用$ evalAsync，在最后一个else块中将$ scope更改包装在如下函数中：

    // admin logged in
    else {
      console.log("Logged in as admin");
      $scope.$evalAsync(function() {
         $scope.loggedin = true;
      });
    }

Answer 2

感谢Sherali Turdiyev解决这个问题。

 //authentication check
 var auth = new FirebaseSimpleLogin(ref, function (error, user) {
if (error) {
  // an error occurred while attempting login
  console.log(error);
}
// no user logged in
 else if (user === null) {
  console.log("Not logged in");
}
// normal user logged in
else if (user.id !== "47f0b82c-59d2-4bcd-8arc-ecb438eb0163") {
  console.log("You are logged in as normal user");
}
// admin logged in
else {
  console.log("Logged in as admin");
  $scope.loggedin = true;
  console.log("logging the scope.loggedin as admin " + $scope.loggedin);
}
// this resolved the issue
$scope.$apply();
 });

在reading the documentation for $scope.$apply()之后我发现这是摘要周期的问题。 $ scope。$ apply（）强制更新范围的摘要。另外，我发现我不应该在控制器中这样做。是时候把它变成指令了。再次感谢他的帮助！

Angular $ scope和ng-if / ng-show问题。状态未在视图中更改

2 个答案: