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 に答える