javascript - 为 ng-show 和 ng-class 评估空数组时的结果不一致

Question

我正在使用 Controller 加载数组，然后根据是否加载数组来显示和隐藏内容。但是，对于 ng-show 和 ng-class 的不同实例，数组的值会有所不同。

我的服务(更新数组的地方)是:

'use strict';

angular.module('yeahdoneit')
.factory('Adate', function ($resource, $http, Alerts, Styling, $filter) {

return {

  Adates: null,

  getPersonAdates: function(personid, callback) {
    var self = this;
    var promise = $http.get('/api/personadates/'+ personid);

    promise.then(function(response){
        self.Adates = response.data;
        callback();
        Styling.setLoading(false);
    }).catch(function(e){
       throw e;
    }).then(function(res){
        // do more stuff
    }).catch(function(e){
        // handle errors in processing or in error.
       Alerts.setMessage(
            Alerts.getAlertTypes().alertType_Error, 
            Alerts.getAlertTitles().alertTitle_Error, 
            Alerts.getAlertMessages().alertMessage_ErrorGettingAdate, 
            false);
        callback();
       Styling.setLoading(false);
    });          
  }
}
});

这是调用服务加载数组的 Controller :

angular.module('ydi')
.controller('MypeopleCtrl', function ($scope, $http, Styling, Person, Adate, Alerts, $timeout, $filter) {

$scope.Styling = Styling;
$scope.activeItem = null;
$scope.Person = Person;
$scope.Adate = Adate;

Person.getMyPersons();

$scope.loadPerson = function($event, personid) {

    Styling.setLoading(true);
    $scope.activeItem = personid;

    Adate.getPersonAdates(personid, function() {
        console.log("ADATE - Adate.Adates", Adate.Adates);
        if (Person.ThePerson === null || personid !== Person.ThePerson._id)
        {
            Person.ThePerson = $filter('filter')($scope.Person.Persons, {_id:personid})[0];
        }
    });

    console.log("MYPEEPS: Adate.Adates",Adate.Adates);
};
});

这是显示代码的模板 View :

<div id="person" ng-class="{ active: Adate.Adates }" >
    <div ng-show="Adate.Adates">
        ... content here ...
    </div>
    <div ng-show="!Adate.Adates" class="rc_instruction">
      <p class="sidenotes"><i class="fa fa-hand-o-left"></i> Click on one of your people over there</p>
      <p class="sidenotes"><i class="fa fa-hand-o-right"></i> Their details will appear over here</p>
    </div>
</div>

当显示 View 并且 getPersonAdates 运行并填充数组时，如果数组有内容，一切正常，但当该数组为空时，会发生以下情况:

1. 父 div 上的 ng-class 评估为 true 并将该类设置为事件。
2. 第一个子 div 上的 ng-show 计算结果为 false 并且不显示。 (它有一个 ng-hide 属性)。
3. 第二个子 div 上的 ng-show 也评估为 false 并且不显示! (它有一个 ng-hide 属性)。

当数组为空时，这是 chrome 元素检查器中这两个子 div 标签的输出:

<div ng-show="Adate.Adates" class="ng-hide"> ... </div>     
<div ng-show="!Adate.Adates" class="rc_instruction ng-hide"> ... </div>

他们会有不同的评价吗？我是否遗漏了一些明显的东西？

Answer 1

在第一种情况下，ng-class 将表达式评估为 true，因为在 JavaScript 中，Array 是 Object 的一个实例。它检查您的 Adate.Adates 是否存在并返回 true

试试看:

if ( Adate.Adates ) {
    // this code will execute when your Adates has an empty array
}

您可以使用 .length 属性修复它:

<div id="person" ng-class="{ active: Adate.Adates.lenght }" >

但是 ng-show 指令使用 toBoolean 函数来评估表达式:

function toBoolean(value) {
  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;
}

这就是为什么您使用 ng-show 和 ng-class 会有不同的结果

更新:

此问题已在 1.3 版中修复，ng-show 不应再使用此功能:

ngShowHide.js v.1.2.27

ngShowHide.js v.1.3.x

Github 问题:https://github.com/angular/angular.js/issues/3969