在AngularJS的ngShow或ngHide中，或者有条件的，当一个属性不存在时会发生什么？ （例如a.b.c.d或！a.b.c.d）

Question

让我们在AngularJS的apply plugin: 'com.android.library' android { compileSdkVersion 19 buildToolsVersion '19.1.0' buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } debug { debuggable true minifyEnabled false } } } dependencies { compile project(':core') compile project(':lib') compile 'com.android.support:support-v4:23.2.0' } 条件下说，如果某个地产不存在会怎么样？

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

1

如果它是什么

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

示例：https://jsfiddle.net/4yg2ocy6/1/

（如果是纯JavaScript，则会引发异常）

我怀疑

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

AngularJS将

视为：

myCtrl.foo.bar.wa.la

和

(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) 视为一个单元，如果Angular可以对其进行评估，然后返回结果，但如果它引发异常，则捕获它并返回false。因此对于(myCtrl.foo.bar.wa.la)，它会将其视为!myCtrl.foo.bar.wa.la，因此为!false。

对此有更明确的规定吗？

Answer 1

简短（和甜蜜）答案

myCtrl.foo.bar.wa.la将评估为undefined，但不会触发ngShow。

答案很长

Angular Expressions vs. JavaScript Expressions需要注意的一件重要事项：

  

原谅：在JavaScript中，尝试评估未定义的属性会生成ReferenceError或TypeError。在Angular中，表达式求值是对undefined和null的宽容。

这意味着a.very.long.reference.which.does.not.exist之类的内容不会引发错误，会评估为未定义。见这个例子：

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 }。

由于当ngHide真实而ngShow评估为expression时触发了a.very.long.reference.which.does.not.exist和undefined，因此很清楚他们为什么不是当财产不存在时触发。

一些表达方式及其评估：

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'