Question

我最近继承了一个使用Angular的asp.net项目，这对我来说很新，所以我提前为任何基本问题或假设道歉。

下面的标记/ js导致无数个以下错误：

达到10 $ digest（）次迭代。中止！

Angular版本1.2.27

我有以下标记（为简洁起见仅显示相关部分）。

<div id="RecentContentGrid" ng-controller="RecentContentCtrl" ng-cloak>
   <ul>
     <li ng-repeat="item in items" ng-class="item.contentType.toLowerCase() && getItemClass(item)" ng-switch on="item.contentType">
        <a href="{{item.url}}" class="content clearfix" title="{{item.displayName}}" ng-switch-default>                                     
           <img ng-src="{{getThumbUrlBySize(item, 320)}}?mh=320" />
        </a>
     </li>
  </ul>
</div>

我的问题在于＆＃34; ng-src =＆＃34; {{getThumbUrlBySize（item，320）}}＆＃34; 部分。这将调用控制器中的方法，该方法又调用Web服务以根据指定的高度获取图像：

$scope.getThumbUrlBySize = function(item, size){
        VideoThumbnail.query({ embedCode : item.embedCode, maxHeight: size }, function (data) {
                return data.Content;
            });            
    }

控制器还具有以下监视方法：

// Watch Methods
    $scope.$watch('params.category', function (newVal, oldVal) {
        if (typeof(newVal) == 'string') {
            $scope.params.perPage = $scope.total_items;
        }

        $scope.items = [];
    });

    $scope.$watchCollection('params', function () {
        var items = [];

        $q.all(_.compact([fetchArticles(), fetchVideos()])).then(function (data) {
            items = _.flatten(data);

            if (items.length == $scope.total_items) {
                items = $filter('orderBy')(items, 'CreatedAt').reverse();

                if (typeof(ad_content) != 'undefined' && ad_content.length > 0 && $scope.ads_served == false) {
                    items = injectAds(items);
                }

                for (i = 0; i < items.length; i++) {
                    items[i].cssClass = "block-" + (i + 1);
                }

                // Append scope items
                $scope.items = $scope.items.concat(items);
            }
            else {
                $scope.messages.push("No more items");
            }
        });
    });

我的问题是如何根据特定的商品属性和尺寸的传入值获取动态图片网址？正如我所提到的，Angular对我来说是一个新手，所以我很欣赏具体的细节。

哦，我应该认为控制器用于网站的许多部分，这就是为什么在特定模块上传入大小，而不是在范围级别传递。 maxHeight变量将根据此模块的使用位置而改变。

非常感谢。

Answer 1

我可以看到您的代码存在一些问题：

函数getThumbUrlBySize不会返回任何内容。因此，标记{{getThumbUrlBySize(item, 320)}}?mh=320无法进行插值，使img个标记保留为空src属性。
VideoThumbnail.query似乎是异步的。即使它返回了Promise对象，也不会使用已解析的值插入标记。
VideoThumbnail.query的回调实际上并没有对它传递的值做任何事情（假设该方法本身不对其回调返回的值做任何事情 - 这是不可能的）

这些问题似乎都不会导致无限的$ digest循环（从您发布的代码我怀疑injectAds函数），但是它们会阻止您的代码正常工作;）

我现在能够想象的最简单的方法是使用以下内容替换for处理程序中的$watchCollection循环：

angular.forEach(items, function(item, i) {
    item.cssClass = "block-" + (i + 1); // this comes from the original for loop
    VideoThumbnail.query({ embedCode : item.embedCode, maxHeight: 320 }, function (data) {
        item.thumbnail = data.Content + "?mh=320";
        /* 
           VideoThumbnail.query accepts a callback instead of returning a Promise, 
           so we have to tell AngularJS to "refresh" when the asynchronous
           job is done:
        */
        $scope.$apply();
    });
});

和img标记：

<img ng-src="{{item.thumbnail}}" />

我不会称这个解决方案完美，但它应该有效：）

角动态ng-src函数导致＆＃34; 10 $ digest（）迭代达到＆＃34;错误

1 个答案: