javascript - 使用 ng-bind 在 Angular 中无限循环

Question

我的 get_tracking() 函数返回一个具有摘要属性的对象。

我尝试了几种不同的方法来完成这项工作，但我没有任何运气。为了解决这个问题，我要么将摘要属性绑定(bind)到包对象，要么只是让它出现在表中。

在此代码中，我首先从数据库中提取所有包并将其存储在 $scope.packs 中。然后，我要么在每个包上运行 get_tracking() 函数，要么将摘要属性应用于每个包。

有没有办法在每个包从数据库返回后运行一个函数？当我尝试以 Angular 运行函数时，我没有任何运气，因为包对象尚未返回。

html:

<tbody>
<tr data-ng-repeat="pack in packs"
 data-ng-show="((authentication.user) && (authentication.user._id == pack.user._id))">
<td data-ng-bind="pack.tracking_number"></td>
<td data-ng-bind="pack.description"></td>
<td data-ng-bind="pack.company"></td>
<td data-ng-bind=""></td>
<td data-ng-bind="get_tracking(pack).summary"></td>
<td ng-bind=""></td>
</tr>     
</tbody>

JS

   $scope.get_tracking = function (packet) {
        if (packet){
            $http.post('/tracking', packet).success(function(response) {
                return response.summary;
            }).error(function(response) {
            });
        } 
    };

Answer 1

在其他地方绑定(bind)摘要属性，并对其使用双向绑定(bind)，以便当从 $http 调用返回结果时，您可以将其显示出来。

<tbody>
    <tr data-ng-repeat="pack in packs"
         data-ng-show="((authentication.user) && (authentication.user._id == pack.user._id))">
       <td data-ng-bind="pack.tracking_number"></td>
       <td data-ng-bind="pack.description"></td>
       <td data-ng-bind="pack.company"></td>
       <td data-ng-bind="{{::get_tracking(pack)}}"></td>
       <td data-ng-bind="trackingSummary[packet]"></td>
       <td ng-bind=""></td>
    </tr>     
</tbody>

JS

$scope.trackingSummary = {};
$scope.get_tracking = function (packet) {
    if (packet){
        $http.post('/tracking', packet).success(function(response) {
            $scope.trackingSummary[packet] = response.summary;
        }).error(function(response) {
        });
    } 
 };

或者:

<tbody>
    <tr data-ng-repeat="pack in packs"
         data-ng-show="((authentication.user) && (authentication.user._id == pack.user._id))">
       <td data-ng-bind="pack.tracking_number"></td>
       <td data-ng-bind="pack.description"></td>
       <td data-ng-bind="pack.company"></td>
       <td data-ng-bind=""></td>
       <td data-ng-bind="get_tracking(pack)"></td>
       <td ng-bind=""></td>
    </tr>     
</tbody>

$scope.trackingSummary = {};
$scope.get_tracking = function (packet) {
    if (packet && !$scope.trackingSummary[packet.tracking_number]){
        $http.post('/tracking', packet).success(function(response) {
            $scope.trackingSummary[packet.tracking_number] = response.summary;
        }).error(function(response) {
        });
    } 
    return $scope.trackingSummary[packet.tracking_number];
 };

更新

如果您添加一个在 $scope.packs 加载时运行的函数，您可以确保只调用一次:

JS

$scope.trackingSummary = {};

$scope.get_tracking = function (packet) {
    if (packet){
        $http.post('/tracking', packet).success(function(response) {
            $scope.trackingSummary[packet.tracking_number] = response.summary;
        }).error(function(response) {
        });
    } 
 };

 //after packs loaded
var onLoadedFunc = function () {
    for (var i = 0; i < $scope.packs.length; i++) {
        $scope.get_tracking($scope.packs[i]);
    }
};

//when you know that the packs collection is loaded:
 onLoadedFunc();

这应该可以防止无限摘要循环，因为调用对象的属性不会像函数那样每次都会导致摘要。如果您的包顺序在加载后不会改变，您还可以传入索引并在对象本身上设置摘要:

var onLoadedFunc = function () {
    for (var i = 0; i < $scope.packs.length; i++) {
        $scope.get_tracking($scope.packs[i], i);
    }
};

$scope.get_tracking = function (packet, index) {
    if (packet){
        $http.post('/tracking', packet).success(function(response) {
            $scope.packs[i].summary = response.summary;
        }).error(function(response) {
        });
    } 
 };

允许像这样的 HTML:

[...]
<td data-ng-bind="pack.summary"></td>
[...]

您还可以从范围中删除 get_tracking 函数，因为它只能由 Controller 中的代码调用，除非您需要更新或更改摘要而不重新加载范围/ View