在AngularJS的ngShow或ngHide或条件式中，当属性不存在时会发生什么? (例如a.b.c.d或！a.b.c.d) [英] In AngularJS's ngShow or ngHide, or conditional, what happens when a property doesn't exist? (such as for a.b.c.d or !a.b.c.d)

问题描述

假设在AngularJS ngShow的情况下，如果不存在属性该怎么办?

Let's say in the condition of AngularJS's ngShow, what if a property doesn't exist?

例如，如果vm.foo是1，那么如果在HTML中有一个

For example, if vm.foo is 1, then what if in the HTML, there is a

<div ng-show="myCtrl.foo.bar.wa.la">
    hello
</div>

那是什么

<div ng-show="!myCtrl.foo.bar.wa.la">
    hello
</div>

示例位于: https://jsfiddle.net/4yg2ocy6/1/

(如果是纯JavaScript，则会引发异常)

(If it is pure JavaScript, it will raise an exception)

我怀疑

myCtrl.foo.bar.wa.la

AngularJS将

视为与以下内容相同:

is treated by AngularJS as the same as:

(myCtrl.foo && myCtrl.foo.bar && myCtrl.foo.bar.wa && myCtrl.foo.bar.wa.la)

和

!myCtrl.foo.bar.wa.la

与

!(myCtrl.foo && myCtrl.foo.bar && myCtrl.foo.bar.wa && myCtrl.foo.bar.wa.la)

但是我找不到有关它的任何文档.

but I can't find any documentation about it.

另一种可能性是它将(myCtrl.foo.bar.wa.la)视为一个单元，如果Angular可以对其进行评估，则返回结果，但是如果引发异常，则将其捕获并返回false.因此，对于!myCtrl.foo.bar.wa.la，它将把它视为!false，因此它是true.

Another possibility is that it treats (myCtrl.foo.bar.wa.la) as one unit, if Angular can evaluate it, then return the result, but if it raises an exception, catch it and return false. So for !myCtrl.foo.bar.wa.la, it will treat it as !false and therefore is true.

对此有更明确的规定吗?

Is there a more definite spec for this?

推荐答案

简短(而且很贴切)的答案

myCtrl.foo.bar.wa.la的计算结果为undefined，不会触发ngShow.

The short (and sweet) answer

myCtrl.foo.bar.wa.la will evaluate to undefined which doesn't trigger ngShow.

Angular Expressions vs. JavaScript Expressions :

宽容:在JavaScript中，尝试评估未定义的属性会生成ReferenceError或TypeError.在Angular中，表达式评估宽容为undefined和null.

Forgiving: In JavaScript, trying to evaluate undefined properties generates ReferenceError or TypeError. In Angular, expression evaluation is forgiving to undefined and null.

这意味着类似a.very.long.reference.which.does.not.exist的内容不会引发错误，并且的计算结果为未定义.请参见以下示例:

This means that something like a.very.long.reference.which.does.not.exist won't throw an error and will evaluate to undefined. See this example:

angular
  .module('myApp', [])
  .controller('MainCtrl', function() {
    var vm = this;

    vm.typeOf = function(value) {
      return typeof value;
    };
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="MainCtrl as vm">
    <div>{{ vm.typeOf(a.very.long.reference.which.does.not.exist) }}</div>
  </div>
</div>

现在，回答您的问题.在内部， ngHide 和 ngShow ，使用基本检查表达式是否为真.它们的操作类似于:if (expression) { // do this } else { // do that }.

Now, to answer your questions. Internally, both ngHide and ngShow, use a basic check to see if the expression is true or not. They do something like: if (expression) { // do this } else { // do that }.

由于当expression为真时触发了ngHide和ngShow，并且a.very.long.reference.which.does.not.exist的计算结果为undefined，因此可以清楚地看到为什么在不存在属性时不触发它们

Since both ngHide and ngShow are triggered when the expression is truthy, and that a.very.long.reference.which.does.not.exist evaluates to undefined, is clear to see why they aren't triggered when a property doesn't exist.

一些表达式及其评估:

undefined ? 'truthy' : 'falsy' // 'falsy'
null ? 'truthy' : 'falsy' // 'falsy'

// Booleans
true ? 'truthy' : 'falsy' // 'truthy'
false ? 'truthy' : 'falsy' // 'falsy'

// Numbers
1 ? 'truthy' : 'falsy' // 'truthy'
0 ? 'truthy' : 'falsy' // 'falsy'
0.00001 ? 'truthy' : 'falsy' // 'truthy'
NaN ? 'truthy' : 'falsy' // 'falsy'

// Strings
'something' ? 'truthy' : 'falsy' // 'truthy'
'0' ? 'truthy' : 'falsy' // 'truthy'
'' ? 'truthy' : 'falsy' // 'falsy'

({}) ? 'truthy' : 'falsy' // 'truthy'
[] ? 'truthy' : 'falsy' // 'truthy'
(new Date()) ? 'truthy' : 'falsy' // 'truthy'

这篇关于在AngularJS的ngShow或ngHide或条件式中，当属性不存在时会发生什么? (例如a.b.c.d或！a.b.c.d)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！