javascript - 调用ng-repeat内部的API函数，提示错误。已达到 10 次 $digest() 迭代。在 AngularJS 中中止

Question

我在 Controller 中定义了一个作用域函数，它正在调用 API 从数据库中获取数据。我在 ng-repeat 中使用这个作用域函数。但是当我运行该应用程序时，它被挂起。

查看:

 <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 Controller :

// 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;
    }

Answer 1

当您将函数放置在 View 插值内部时，每个摘要周期至少会对其进行两次评估，每秒可能会评估多次。因此，将 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>'
    }
});

...它会出现在您的 View 中，看起来像这样:

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

享受..