2

我在加载视图时面临无限循环的问题。数据是使用控制器中的 ngResource 从 API 调用加载的。在正确渲染视图之前，视图似乎被重新加载了多次。我在模板调用范围方法中使用 ng 指令，这似乎进入循环，导致视图被重新渲染。

这是我的控制器

.controller('IndexCtrl', ['$scope', '$stateParams', 'ProfileInfo',
function($scope, $stateParams, ProfileInfo) {
    $scope.navTitle = 'Profile Information';

    $scope.data = {};

    ProfileInfo.query({
        id: $stateParams.id
    }).$promise.then(function(Profile) {

        if (Profile.status == 200) {
            $scope.data.Profile = Profile.data[0];
          }else{
             console.log(Profile.status);
          }

    }, function(error) {
        console.log(error);
    });
    $scope.showImageBlock = function(object, image) {
            if (object.hasOwnProperty('type') && object.type == 'image') {
                imageReference = object.value;
                var imageUrl;
                angular.forEach(image, function(value, key) {
                    if (value.id == imageReference) {
                      $scope.data.imageUrl = value.graphic.url;
                        return;
                    }
                });
            }
            return object.hasOwnProperty('type') && object.type == 'image';
        };

        $scope.showText = function(object) {
            console.log('text');
            return object.hasOwnProperty('type') && object.type == 'text';
        };

}
])

这是我的模板

<ion-view cache-view="false">
<ion-nav-title>
    {{navTitle}}
</ion-nav-title>
<div class="bar bar-subheader bar-light">
    <h2 class="title">{{navSubTitle}}</h2>
</div>
<ion-content has-header="true" padding="true" has-tabs="true" class="has-subheader">
    <div ng-repeat="profileInfo in data.Profile">
        <div class="list">
            <img ng-if="showImageBlock(profileInfo,data.Profile.images)"  ng-src="{{ data.imageUrl }}" class="image-list-thumb" />
            <div ng-if="showText(profileInfo)">
                <a class="item">
                    {{profileInfo.name}}
                  <span ng-if="profileInfo.description.length != 0"class="item-note">
                    {{profileInfo.description}}
                  </span>
                </a>
            </div>
        </div>
    </div>
</ion-content>

这是尝试记录调用 showText 函数的次数时控制台窗口的输出。

控制台输出

ngResource 调用的实际结果在数组中只有 9 个项目，但它循环了 9 次以上，并且还有多个循环。这会发生一段时间并停止。谁能指出我修复它的正确方向。

谢谢

4

1 回答 1

0

最后，我最终创建了一个自定义指令，该指令执行 ng-if 的功能，而没有触发摘要循环的观察者。这不是一个很好的解决方案，但它似乎可以按预期完成工作。我复制了 ng-if 的代码并删除了 $scope 观察者。这是自定义指令。

angular.module('custom.directives', [])

.directive('customIf', ['$animate',function($animate) {
   return {
     multiElement: true,
     transclude: 'element',
     priority: 600,
     terminal: true,
     restrict: 'A',
     $$tlb: true,
     link: function($scope, $element, $attr, ctrl, $transclude) {
        var block, childScope, previousElements;
        value = $scope.$eval($attr.customIf);
        if (value) {
          if (!childScope) {
            $transclude(function(clone, newScope) {
              childScope = newScope;
              clone[clone.length++] = document.createComment(' end customIf: ' + $attr.customIf + ' ');
             block = {
              clone: clone
             };
             $animate.enter(clone, $element.parent(), $element);
           });
        }
      } 
      else {
        if (previousElements) {
           previousElements.remove();
           previousElements = null;
          }
        if (childScope) {
          childScope.$destroy();
          childScope = null;
        }
        if (block) {
          previousElements = getBlockNodes(block.clone);
          $animate.leave(previousElements).then(function() {
            previousElements = null;
          });
          block = null;
        }
      }
    }
  };
}]);

这允许我们使用 customIf 如下

<div custom-if="showText(profileInfo)">
于 2015-08-14T00:59:54.490 回答