Question

我在加载视图时遇到无限循环问题。使用控制器中的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次，并且还有多个循环。这种情况会持续一段时间并停止。任何人都可以指出我正确的方向来解决它。

谢谢

Answer 1

最后，我最终创建了一个自定义指令，该指令执行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)">

AngularJS - ng-if运行摘要循环

1 个答案: