调用ng-erepeat内部的API函数，提示错误.达到10$digest(）迭代.在angularjs中中止

Call API function inside ng-repeat, prompting error. 10 $digest() iterations reached. aborting in angularjs

本文关键字：digest angularjs 迭代 达到 内部 ng-erepeat API 函数 错误 提示 调用      更新时间：2023-09-26

我在控制器中定义了一个作用域函数，该函数调用API从数据库中获取数据。我在ng repeat中使用这个scope函数。但当我运行应用程序时，它会挂起。

视图：

 <div class="col-xs-4 product-padding" ng-repeat="product in productList | filter:query | orderBy:'name'| offset: currentPage*itemsPerPage | limitTo: itemsPerPage " ng-cloak>
                <div class="theme-04-scope">
                    <div class="thumbnail">
                        <small class="defaultImageSize" ng-if="checkImageAttribute(product.ItemAttributes) == true">
                            <img class="ui-corner-all img-responsive defaultImageSize" ng-src="data:image/jpeg;base64,{{loadProductImage(product.ItemAttributes)}}" />
                            @*ng-src="/Product/LoadProductImage/{{loadProductImage(product.ItemAttributes)}}?width=200&height=144"*@
                        </small>
                    </div>
                </div>
        </div>

Angularjs控制器：

// Get product image. 
    $scope.loadProductImage = function (itemAttributes) {
        var imageId = 0;
        $.each(itemAttributes, function (index, data) {
            if (data.AttributeId == 1000700 && data.DataXml != null) {
                imageId = data.DataXml;
                return false;
            }
        });
        productRepository.getProductImage(imageId, 200, 144).then(function (imageArrary) {
            $scope.itemIdArr.push(imageId);
            $scope.productImage = imageArrary;
        });
        return $scope.productImage;
    }

存储库功能：

 getProductImage: function (imageId, width, height) {
        var deferred = $q.defer();
        $http.post('/Product/LoadProductListImage', JSON.stringify({ id: imageId, width: width, height: height })).success(deferred.resolve).error(deferred.reject);
        return deferred.promise;
    }

当您将函数放置在视图插值内时，每个摘要周期至少会对其求值两次，每秒可以求值多次。因此，将API调用放入其中一个函数中不是一个好主意。

.directive('getProductImage', function ($http) {
    return {
        scope: {
            imageId: '@imageId',
            width: '@width',
            height: '@height'
        },
        link: function (scope, element, attrs) {
            console.info(scope.imageId, scope.width, scope.height)
            $http.post('/Product/LoadProductListImage', JSON.stringify({ id: scope.imageId, width: scope.width, height: scope.height })).success(function (data) {
                scope.imageArrr = data;
            });
        },
        template: '<img class="ui-corner-all img-responsive defaultImageSize" ng-src="data:image/jpeg;base64,{{imageArrr}}"></img>'
    }
});

它会出现在你的视野中，看起来像这样：

<span get-product-image width="200" image-id="200" height="144"></span>

享受。。

相关文章：