javascript - 在填充 $scope 数组之前调用的函数

Question

我在使用 AngularJS 和在填充数据数组之前调用的函数时遇到问题。当我的函数在 ng-init 中被调用时, $scope.bookings数组尚未计算(填充数据)，导致没有数据。

我的目标是:获取特定预订类型和特定日期的所有预订，并将所有预订显示在 <td> 中

---

这是我的 HTML 代码:

描述:我遍历所有 bookingTypes然后通过所有 dates . ng-init与日期一样执行多次，并且有效。 otherBookings应该是该预订类型和该日期的一系列预订。然而，$scope.bookings尚未填充数据，所以 otherBookings循环永远不会执行。

<tr ng-repeat="bookingType in bookingTypes">
    <td>{{bookingType.Name}}]</td>
    <td ng-repeat="date in dates" ng-init="otherBookings = checkOtherBookings(bookingType.ID, date)">
        <span ng-repeat="otherBooking in otherBookings">
            <a ng-href="/Bookings/Edit/{{otherBooking.Booking.ID}}"><span >{{otherBooking.Customer.FirstName}}</span></a>
        </span>
    </td>
</tr>

---

这是我的 JavaScript 代码:

描述:在 BookingsController 的顶部我调用了一个填充 $scope.bookings 的服务包含数据和 $scope.checkOtherBookings() 的数组函数在下面:

BookingService.getAllBookings().then(function(data) {
    $scope.bookings = data.data;
});

$scope.checkOtherBookings = function(bookingType, date) {
    console.log($scope.bookings);

    var newBookingArray = [];
    for(var i = 0; i < $scope.bookings.length; i++) {
        if($scope.bookings[i].Booking.Type == bookingType) {
            var tmpDateFrom = $scope.bookings[i].Booking.DateFrom;
            var tmpDateTo = $scope.bookings[i].Booking.DateTo;
            if(date >= tmpDateFrom && date <= tmpDateTo) {
                newBookingArray.push($scope.bookings[i]);
            }
        }
    }

    return newBookingArray;
};

$scope.checkOtherBookings()函数被调用 22 次 (与日期一样多)，但是 console.log($scope.bookings)正在输出22 次 [] - 所以我的观察是$scope.bookings每次调用函数时数组为空。

我需要某种方法来等待执行 ng-init直到 $scope.bookings数组中充满了数据。

有什么想法吗？

---

更新 1 - 14.09.13

现在newBookingArray有一些数据但是 otherBookings在 ng-init永远不会得到它们。

HTML:

<tr ng-repeat="bookingType in bookingTypes">
    <td>{{bookingType.Name}}</td>
    <td ng-repeat="date in dates" ng-init="otherBookings = checkOtherBookings(bookingType.ID, date)">
        <span ng-repeat="otherBooking in otherBookings">
            <a ng-href="/Bookings/Edit/{{otherBooking.Booking.ID}}"><span >{{otherBooking.Customer.FirstName}}</span></a>
        </span>
    </td>
</tr>

JavaScript:

BookingService.getAllBookings().then(function(data) {
    $scope.bookings = data.data;
});

$scope.checkOtherBookings = function(bookingTypeID, date) {
    var deferred = $q.defer();
    $scope.$watch('bookings', function(bookings) {
        if(!bookings.length) return;
        var newBookingArray = [];
        for(var i = 0; i < $scope.bookings.length; i++) {
            if($scope.bookings[i].Booking.Type == bookingTypeID) {
                var tmpDateFrom = $scope.bookings[i].Booking.DateFrom;
                var tmpDateTo = $scope.bookings[i].Booking.DateTo;
                if(date >= tmpDateFrom && date <= tmpDateTo) {
                    newBookingArray.push($scope.bookings[i]);
                    console.log(JSON.stringify(newBookingArray));
                }
            }
        }

        deferred.resolve(newBookingArray);
    });

    return deferred.promise;
};

---

更新 2 - 14.09.13

已解决!我将作业从 ng-init 移到了到 ng-repeat而且效果很好。

HTML:

<tr ng-repeat="bookingType in bookingTypes">
    <td>{{bookingType.Name}}</td>
    <td ng-repeat="date in dates">
        <span ng-repeat="otherBooking in checkOtherBookings(bookingType.ID, date)">
            <a ng-href="/Bookings/Edit/{{otherBooking.Booking.ID}}"><span >{{otherBooking.Customer.FirstName}}</span></a>
        </span>
    </td>
</tr>

JavaScript:

BookingService.getAllBookings().then(function(data) {
    $scope.bookings = data.data;
});

$scope.checkOtherBookings = function(bookingTypeID, date) {
    var newBookingArray = [];
    for(var i = 0; i < $scope.bookings.length; i++) {
        if($scope.bookings[i].Booking.Type == bookingTypeID) {
            var tmpDateFrom = $scope.bookings[i].Booking.DateFrom;
            var tmpDateTo = $scope.bookings[i].Booking.DateTo;
            if(dateInRange(tmpDateFrom, tmpDateTo, date)) {
                newBookingArray.push($scope.bookings[i]);
            }
        }
    }

    return newBookingArray;
};

Answer 1

您可以在 checkOtherBookings 中返回一个 promise 。 AngularJS 解析器自动处理 promise 。所以你的代码看起来像这样:

$scope.checkOtherBookings = function(bookingType, date) {
    var deferred = $q.defer();
    $scope.$watch('bookings', function(bookings) {
        if (!bookings) return;
        var newBookingArray = [];
        for(var i = 0; i < $scope.bookings.length; i++) {
            if($scope.bookings[i].Booking.Type == bookingType) {
                var tmpDateFrom = $scope.bookings[i].Booking.DateFrom;
                var tmpDateTo = $scope.bookings[i].Booking.DateTo;
                if(date >= tmpDateFrom && date <= tmpDateTo) {
                    newBookingArray.push($scope.bookings[i]);
                }
            }
        }

        deferred.resolve(newBookingArray);
    });
    return deferred.promise;
};

我创建了一个 plunker 来演示这里的技术:demo link .

更新:

上述方法适用于 AngularJS 1.0.x。 AngularJS 1.2RC(可能还有 1.1.x)的解析器以不同的方式处理函数返回 promise ，特别是它不返回 promise 而是立即返回 promise 的内部 $$v，即 undefined 因为它还没有解决。如果您使用 1.2，我建议摆脱 ng-init 并尝试以下方法之一。

方法一:

$scope.$watch('bookings', function(bookings) {
    if (!bookings) return;
    // filter bookings, then set $scope.otherBookings = filteredList
});

方法 #2:

$scope.getOtherBookings = function() {
   // return filter list here
}

<span ng-repeat="otherBooking in getOtherBookings()">

方法 #3:

<span ng-repeat="otherBooking in bookings | customFilterFunction">