AngularJS: ng-show="user“falsey，ng-show="!!user”真实性？

Question

我在当前范围上有一个用户，由我的当前控制器设置。

$scope.user = user;

根据这个用户的存在有选择地显示/隐藏一个<div>并不像我所期望的那样工作，而是抛出一个异常。

不工作： ng-show="user"

<div class='row' ng-show="user">
    ...
</div>

Works: ng-show="!!user"

<div class='row' ng-show="!!user">
    ...
</div>

导致ng-show不真实的ng-show="user"是怎么回事？

我使用的是来自angular.1.2.6的https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js

引发的异常：

如果我使用ng-show="user"，那么在我的控制台中会得到以下异常：

TypeError: Cannot convert object to primitive value
    at Ma (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:14:240)
    at Object.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:185:464)
    at Object.applyFunction [as fn] (<anonymous>:778:50)
    at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:99:211)
    at h.$delegate.__proto__.$digest (<anonymous>:844:31)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:101:256
    at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:33:182)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:36:378 

当我使用ng-show="!!user"时，此错误消失。

用户对象：

这是user对象，它位于$scope上

{
  "state": "",
  "access_token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "token_type": "Bearer",
  "expires_in": "3600",
  "code": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "scope": "https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/plus.moments.write https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/plus.profile.agerange.read https://www.googleapis.com/auth/plus.profile.language.read https://www.googleapis.com/auth/plus.circles.members.read",
  "id_token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "authuser": "0",
  "session_state": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "prompt": "none",
  "client_id": "xxxxxxxxxxx.apps.googleusercontent.com",
  "g_user_cookie_policy": "single_host_origin",
  "cookie_policy": "single_host_origin",
  "response_type": "code token id_token gsession",
  "issued_at": "1391059385",
  "expires_at": "1391062985",
  "_aa": "0",
  "status": {
    "google_logged_in": true,
    "signed_in": true,
    "method": "AUTO"
  }
}

Answer 1

请记住，ngShow期望一个表达式进行计算，并使用此函数将其“转换”为布尔值：

function toBoolean(value) {
  if (typeof value === 'function') {
    value = true;
  } else if (value && value.length !== 0) {
    var v = lowercase("" + value);
    value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]');
  } else {
    value = false;
  }
  return value;
}

https://github.com/angular/angular.js/blob/834d316829afdd0cc6a680f47d4c9b691edcc989/src/Angular.js#L962

所以你不应该只使用一个物体。你可以继续使用!!user或者user.someattr

Answer 2

那个！运算符基本上将JS对象转换为布尔值。

请查看以下示例：

function myCtrl($scope) {
    $scope.user = 'false';
    $scope.boolean = !!$scope.user;
}

我们创建一个用户对象，例如包含字符串false，它是通过调用！的布尔表示！操作符。因为$scope.user有一个非空的值，所以!！运算符将将其转换为真。不管角度如何，都会将字符串'false‘转换为布尔值false，从而隐藏div。

我们可以通过以下方式对其进行测试：

<div ng-controller="myCtrl">
    <div ng-show="boolean">
        test boolean
    </div>

    <div ng-show="user">
        test user
    </div>

    <span>{{boolean}}</span>
</div>

其产出如下：

test boolean
true

http://jsfiddle.net/FTXn3/

@编辑

由于我们讨论的是用户对象，而不是字符串，正如您收到的错误消息所述，！为您执行到布尔值(=原语)的转换。