Question

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

$scope.user = user;

根据此用户的存在选择性地显示/隐藏<div>无法正常工作，而是抛出异常。

不起作用： ng-show="user"

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

作品 ng-show="!!user"

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

ng-show会发生什么导致ng-show="user"不真实？

我正在使用https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js

中的angular.1.2.6

抛出异常：

如果我使用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期望表达式进行评估，并且＆＃34;转换＆＃34;使用此函数的布尔值：

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

!! operator基本上将JS对象转换为布尔值。

查看以下示例：

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

我们创建一个用户对象，包含例如字符串false，并通过调用!!来表示它的布尔值。运营商。由于$ scope.user的值不为null，因此!!运算符会将其转换为true。但是，angular会将字符串'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/

@EDIT

由于我们讨论的是用户对象而不是字符串，正如您收到的错误消息所述，!!为你做转换为boolean（= primitive）。

AngularJS：ng-show =“user”falsey，ng-show =“!! user”truthy？

2 个答案: