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运行并填充数组时，如果数组包含内容，则一切正常，但当该数组为空时，会发生以下情况：

父div上的ng-class计算结果为true，并将该类设置为活动状态。
第一个子div上的ng-show评估为false并且不显示。（它有一个ng-hide属性）。
第二个子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>

他们有何不同的评价方式？我错过了一些明显的东西吗？

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

0 个答案: