Angular 中的无限循环使用 ng-bind

Infinite loop in Angular using ng-bind

本文关键字：ng-bind 无限循环 Angular      更新时间：2023-09-26

我的get_tracking((函数返回一个带有summary属性的对象。

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

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

有

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

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

将 summary 属性绑定到其他位置，并对其使用双向绑定，以便在从$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();

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

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 函数，因为它只会由控制器中的代码调用，除非您需要在不重新加载范围/视图的情况下更新或更改摘要

使用

这样的东西<td data-ng-bind="get_tracking(pack).summary"></td>是不好的做法。每次角度执行绑定时都发送请求。在处理程序中，您可以更新触发绑定的数据，这就是您在应用程序中具有无限循环的原因。

在传递到视图之前准备所有数据。获取每个包的跟踪信息，准备结构良好的对象，然后传递到查看。您将获得更好的性能。

你的$scope.get_tracking函数使用$http.post，它是"promise"和"return response.summary;"的类型，不会向函数"get_tracking"返回任何值

相关文章：