[MONGODB] NG는-경우가해야보다 더 많은 시간을 호출되는

NG는-경우가해야보다 더 많은 시간을 호출되는

내가 선택한 카테고리에 따라 일부 채널을 필터링하는 데 노력하고있어.

나는 NG-IF = "hasCategory (channel.category)가 채널에서 채널의 겨 반복을

여기 문서입니다 :

db.channels.find().pretty()
{
    "_id" : "2kj9GK8jE9yHezoWb",
    "name" : "example name",
    "logo" : "path/to/image.svg",
    "number" : 2,
    "category" : [
        "Broadcast",
        "Premium"
    ],
    "tags" : "example tag tags"
}

이것은 NG-경우를 처리 할 수있는 기능입니다 :

$scope.hasCategory = function (categoryNameArray) {
  console.log('thisisbeingcalled');
  var e = _.indexOf(categoryNameArray, $scope.activeCategory);
  if (e === -1) {
    return false;
  } else {
    return true;
  }
};

이것은 내가 활성 범주를 설정하는 방법입니다 :

$scope.setCategory = function (name) {
  $scope.activeCategory = name;
};

이는 내가보기 버튼을 클릭하여 보내 :

<section layout="row" layout-align="center center" layout-wrap ng-init="activeIndex; activeCategory">
  <md-button flex="auto" flex-sm="45" flex-xs="100" ng-repeat="kit in kits | orderBy: 'order'" ng-class="{active: (activeIndex.index == $index)}" class="md-raised">
    <a href="" ng-click="activeIndex.index = $index; setCategory(kit.name);" class="bold">{{kit.name}}</a>
  </md-button>
</section>

여기 키트 문서의 스키마는 다음과 같습니다

db.kits.find().pretty()
{ "_id" : "k7JFX6DHu5GYnyer3", "name" : "Broadcast", "order" : 1 }
{ "_id" : "KrKRm4gysw5sfQnnr", "name" : "Premium", "order" : 2 }
{ "_id" : "dieukQ3NRsA44CSns", "name" : "Ultimate", "order" : 3 }

지금은이 밖을 테스트하는 하나 개의 채널을 가지고 있지만 때마다 나는 카테고리를 변경하려면 버튼을 클릭 $ scope.hasCategory 기능 (처음 로딩)도 페이지의 시작에서 여러 번 호출되는

나는 또한 현재 카테고리의 채널을 검색 할 수있는 검색 창을 가지고, 나는 확실하지 그뿐만 아니라이 영향을 미치는 경우입니다.

<input type="text" ng-model="queryname" ng-model-options="{debounce: 500}">

내가 이상 100 채널을 때 지금이 정말 랙이 도착의 NG-경우 아주 잠시 동안 페이지 동결을 만드는 이상 10,000 번 호출됩니다.

나는이 문제를 해결하기 위해 무엇을 할 수 있습니까?

편집하다

겨-경우하면 어디에 추가 잊어 버렸 :

<md-card flex="15" flex-xs="40" class="slide-up" layout="column" ng-repeat="channel in channels | orderBy: 'number' | filter: queryname" ng-if="hasCategory(channel.category)" ng-init="channel.edit = false">
  <md-card-header ng-show="channel.edit == false">
    <img ng-src="{{channel.logo}}" alt="">
  </md-card-header>
  <md-card-header-text ng-show="channel.edit == false">
    <span class="md-subhead dark-blue" layout="row" layout-align="center" layout-margin>{{channel.number}}</span>
  </md-card-header-text>
</md-card>

해결법

1. ==============================

   1.귀하의 NG는-경우 모든 다이제스트 루프에 호출됩니다. 문제는 함수 호출을 포함하는 표현이 포함되어 있다는 것입니다. 그 때마다 그것을 호출 할 수 있도록 각도는 식의 결과가 변경 될 때 알 수있는 방법이 없습니다.

   귀하의 NG는-경우 모든 다이제스트 루프에 호출됩니다. 문제는 함수 호출을 포함하는 표현이 포함되어 있다는 것입니다. 그 때마다 그것을 호출 할 수 있도록 각도는 식의 결과가 변경 될 때 알 수있는 방법이 없습니다.

   더 나은 옵션은 관련 플래그를 테스트 할 경우 NG-채널과 사용의 각 플래그를 설정하는 것입니다. 당신도 당신이 범주 또는 $ 범위. $ 시계를 사용하여 설정 코드로 할 수있는 $ scope.activeCategory 변경 ()가 자동으로 트리거 할 때마다 그럼 그냥 플래그를 업데이트해야합니다.

   EG

   $scope.setCategory = function (name) {
     $scope.activeCategory = name;
     for (var index=0; index < $scope.channels.length; index++) {
         $scope.channels[index].hasCategory = hasCategory($scope.channels[index].category, name);
     }
   };
   
   function hasCategory(categoryNameArray, name) {
     console.log('thisisbeingcalled');
     var e = _.indexOf(categoryNameArray, name);
     if (e === -1) {
       return false;
     } else {
       return true;
     }
   }
   

   그런 다음 템플릿 :

   <md-card flex="15" flex-xs="40" class="slide-up" layout="column"
       ng-repeat="channel in channels | orderBy: 'number' | filter: queryname"
       ng-if="channel.hasCategory"
       ng-init="channel.edit = false">
     <md-card-header ng-show="channel.edit == false">
       <img ng-src="{{channel.logo}}" alt="">
     </md-card-header>
     <md-card-header-text ng-show="channel.edit == false">
       <span class="md-subhead dark-blue" layout="row" layout-align="center" layout-margin>{{channel.number}}</span>
     </md-card-header-text>
   </md-card>
   

   보다 효율적으로해야한다.

from https://stackoverflow.com/questions/35040151/ng-if-being-called-more-times-than-it-should by cc-by-sa and MIT license