AngularJS ng-show 与 $scope 变量不起作用答案

【问题标题】：AngularJS ng-show with $scope variable not workingAngularJS ng-show 与 $scope 变量不起作用
【发布时间】：2017-09-20 21:01:26
【问题描述】：

伙计们。我正在做一个登录页面。当用户尚未登录时，页面将显示问候语和登录按钮。当用户登录时，问候和登录按钮将消失，并出现注销按钮。

但是，我的问候 div 永远不会消失。我不知道为什么。我尝试使用 $scope.$apply() 但它根本不起作用。以下是我的代码。请帮忙，谢谢。

PS：我希望人们登录时问候消失，并且人们注销时问候也会出现。

我的 HTML

<div ng-show="show.intro">
    <h3>Hi, how are you?</h3>
    <i>*Please log in first to access your news.</i>
  </div>
  <span>
    <br>
    <button type="button" class="btn btn-info" ng-click="login()" ng-hide="authData">Login using Google Account</button> 
  </span>
  <span class="pull-right">
    <br>
    <button type="button" class="btn btn-info" ng-click="logout()" ng-show="authData">Log Out</button> 
  </span>

我的控制器

.controller("AuthController", ["$scope", "$location",
    function($scope, $location) {
        $scope.show = {intro: true};
        $scope.login = function() {
            $scope.show.intro = false;
        };
        $scope.logout = function() {
            $scope.show.intro = true;
        };

谢谢。

【问题讨论】：

你在哪里设置 authData？
authData 是 firebase 身份验证方法的返回值。所以如果 authData 为空，页面会显示登录按钮，如果 authData 有值，它将显示注销按钮。
代码看起来有效。能给个完整的html吗？并尝试输入 {{show}}

嗨，你好吗？
*请先登录以查看您的新闻。
这样我们就可以看到可以从 div 访问的对象

标签： angularjs angularjs-scope ng-show

【解决方案1】：

我只是添加了 ng-controller 并且代码工作正常。请参阅工作 plnkr：

http://plnkr.co/edit/cLyvEp?p=preview

html:

<div ng-controller="AuthController">
  <div ng-show="show.intro">
    <h3>Hi, how are you?</h3>
    <i>*Please log in first to access your news.</i>
  </div>
  <span>
    <br>
    <button type="button" class="btn btn-info" ng-click="login()" ng-hide="authData">Login using Google Account</button> 
  </span>
  <span class="pull-right">
    <br>
    <button type="button" class="btn btn-info" ng-click="logout()" ng-show="authData">Log Out</button> 
  </span>
 </div>

js:

(function(){
var app = angular.module('myApp', []);

app.controller("AuthController", ["$scope", "$location",
    function($scope, $location) {
        $scope.show = {intro: true};
        $scope.login = function() {
            $scope.show.intro = false;
            $scope.authData = true;
        };
        $scope.logout = function() {
            $scope.show.intro = true;
            $scope.authData = null;
        };
    }]
);
})();

【讨论】：

【解决方案2】：

1）你也可以这样尝试，它对我有用，检查一次..

<body ng-controller="AuthController">
    <div ng-show="show.intro">
        <h3>Hi, how are you?</h3>
        <i>*Please log in first to access your news.</i>

        <span>
            <br>
            <button type="button" class="btn btn-info" ng-click="login()" >Login using Google Account</button> 
        </span>
    </div>
    <span class="pull-right">
        <br>
        <button type="button" class="btn btn-info" ng-click="logout()" ng-show="!show.intro">Log Out</button> 
    </span>
    <script>
     angular.module('myApp', [])
             .controller("AuthController", ["$scope", "$location",function ($scope, $location) {
                        $scope.show = {intro: true};
                        $scope.login = function () {
                             $scope.show.intro = false;
                        };
                        $scope.logout = function () {
                             $scope.show.intro = true;
                        };
              }]);
    </script>
</body>

【讨论】：

【解决方案3】：

我想我找到了 show.intro 总是正确的原因。

$scope.authData = null;
**$scope.show = {intro: true};**
var authDataCallback = function(authData) {
    $scope.authData = authData;
}

// monitoring authentication status
ref.onAuth(authDataCallback);

我有上面的代码来检查我的身份验证状态。所以我猜每次控制器去检查状态（onAuth）时，它都会将布尔值更改为true（见粗线）。

以下是我解决这个问题的答案。

 $scope.authData = null;
**$scope.show = {intro: true};**
var authDataCallback = function(authData) {
    $scope.authData = authData;
    if($scope.authData === null) {
        $scope.show.intro = true;
    }
    else {
        $scope.show.intro = false;
    }
}

// monitoring authentication status
ref.onAuth(authDataCallback);

【讨论】：

嗨，你好吗？