Question

我想根据用户是否登录来显示/隐藏两个div。我知道用户是根据应用程序加载时是否有特定的查询参数登录的。（这是设计的，它是一个演示）所以当页面加载时，我在控制器中有一个名为login的var，我将其初始化为false。

我使用$ scope.init在页面加载后运行一些代码来测试查询参数并适当地设置我的登录字段。我已尝试ng-show="login"以及ng-show="login == false/true"。它似乎永远不会显示或隐藏......它总是隐藏起来。我做错了什么？

    <div class="pull-right" style="padding-top: 16px;">
        <a ng-show="login == false" ng-href="http://someSite/authorize">Login</a>
    </div>
    <div ng-show="login == true" class="pull-right" style="padding-top: 16px;">
        Welcome, {{fullName}} - <img width="40" height="50" ng-src="{{picture}}"/>
    </div>

在我的控制器中 - 为了简洁而尽可能省略

var app = angular.module('showtime', [], function($locationProvider) {
      $locationProvider.html5Mode({enabled:true,  requireBase: false});
    });

app.controller('showtimeController', function ($scope, $location, $http, $httpParamSerializer) {

    $scope.login = false;

    $scope.init = function () {
        $scope.oauth.authuser = $location.search()['authuser'];
        $scope.oauth.session_state = $location.search()['session_state'];
        $scope.oauth.prompt = $location.search()['prompt'];

        $scope.qs = $httpParamSerializer($scope.oauth);

        //   ...

        if ($scope.oauth.state) {
            console.log('returning from an access code flow with tokens and more');
            $http.get('http://someApi/code' + '?' $scope.qs).then(function (response) {
                $scope.picture = response.data.picture;
                $scope.login = true;
            });
        }
    };
});

Answer 1

尝试

login === true

或

<div ng-show="!!login" class="pull-right" style="padding-top: 16px;">

您也可以尝试打印到控制台并查看登录值是否显示？

Answer 2

您可以使用ng-show和ng-hide来实现此目的

<div class="pull-right" style="padding-top: 16px;">
    <a ng-hide="login" ng-href="http://someSite/authorize">Login</a>
</div>
<div ng-show="login" class="pull-right" style="padding-top: 16px;">
    Welcome, {{fullName}} - <img width="40" height="50" ng-src="{{picture}}"/>
</div>

两者都将相互依赖。由于我们在ng-show和ng-hide中使用了相同的条件，因此一次只会显示一个div。

ng-show和ng-hide只会设置元素的可见性。永远不会停止HTML DOM元素的渲染。

AngularJS ng-show表现不尽如人意

2 个答案: