Question

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

然而，我的问候语从未消失过。我不知道为什么。我尝试使用$ 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;
        };

感谢。

Answer 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;
        };
    }]
);
})();

Answer 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>

Answer 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);

AngularJS ng-show，$ scope变量不起作用

3 个答案: