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

Question

我正在使用控制器加载数组，然后根据是否加载数组来显示和隐藏内容。但是，对于 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);
    });          
  }
}
});

这是调用服务加载数组的控制器：

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);
};
});

这是显示代码的模板视图：

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

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

parent div 上的 ng-class 计算结果为真并将 class 设置为活动。
第一个childdiv上的ng-show求值为false，不显示。（它有一个 ng-hide 属性）。
第二个childdiv上的ng-show也求值为false，不显示！（它有一个 ng-hide 属性）。

这是 chrome 中元素检查器中那两个 child 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 中数组是对象的一个实例。它会检查您的 Adate.Adates 是否存在并且 returns 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

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

Inconsistent results when evaluating an empty array for ng-show and ng-class

javascript

angularjs

ng-class

ng-show