Угловой нг-повтор вызывает множество петель - PullRequest
Новая
       6

Угловой нг-повтор вызывает множество петель

0 голосов
/ 19 ноября 2018

Мой набор тестовых данных имеет один элемент в массиве.Я использую ng-repeat, чтобы перебрать массив для отображения элемента.Отображаемый HTML вызывает функцию для каждого визуализированного элемента - в этом случае его следует вызывать только один раз, поскольку в массиве только один элемент.Тем не менее, , хотя только один элемент отображается должным образом, я вижу, что функция вызывается 3 раза, хотя ее следует вызывать только один раз .

Элемент является активным для щелчка, открываяинформация об этом основном элементе.Когда элемент щелкается, эта же функция вызывается четвертый раз.

Мой набор данных, выводимый из console.log(clubs) в контроллере: 

{success: true, data: Array(1)}
data: Array(1)
  0: {clID: "1", cID: "1001", clTime: "19:29:15", clDate: "2018-08-27", clActive: "1", …}
  length: 1
  __proto__: Array(0)
  success: true
  __proto__: Object

HTML из моего шаблона.{{ showClub() }} - это тестовая функция, просто показывающая, сколько раз вызывается функция, и отображает вывод console.log.В этом случае ng-repeat вызывает его 3 раза ... и должен вызывать только один раз.Обратите внимание, что есть .:

  <div id="club_tabItem_{{club.cID}}" style="padding:5px;border-bottom:1px solid grey;" ng-click="showEvents(club.clID);" class="item-remove-animate item-avatar" ng-repeat="club in clubs.data">
    <div id="loc_{{club.clID}}" style="left:15px;">
      <h3>{{club.clVendor}}
      {{ showClub() }}  <!-- this is the test function -->
        <!-- <span style="margin-left:15px;">Location: {{club.data[0].clAddress1}}, {{club.data[0].clCity}}</span> -->
        <i style="font-size:25px;float:right;" class="icon ion-android-arrow-dropdown-circle icon-accessory customColor1"></i>
      </h3> 
      <span style="padding-left:30px;">{{club.clDesc}}</span>
      <div id="eventsDiv_{{club.clID}}" style="width:100%;display:none;margin-top:10px;background-color:lightGrey;"
        ng-if="club.cID == event.cID"
        ng-click="$location.url('/tab/clubs/{{event.ceID}}')"
        ng-repeat="event in club.events"
      >
        <div id="events_{{event.ceID}}" style="width:80%;margin-left:20%;display:inline-block;" >
          <div style="float:left;font-size:14px;font-weight:bolder;">{{event.ceName}} ({{event.ceName1}}) </div>
          <div style="float:left;margin-left:15px;">Location: {{club.clAddress1}}, {{club.clCity}}</div> 
          <div style="float:left;margin-left:15px;">Next: {{ nextEvent(event) }}</div>         
        </div>
      </div>
    </div>
  </div>

В приведенном выше HTML-коде указан один элемент ... при его нажатии, чтобы отобразить подэлементы, тот же самый {{ showClub() }} вызывается снова в 4-й раз. 

Init Club: 0
Init Club: 1
Init Club: 2
<!-- above three outputs are from initial ng-repeat, below is from clicking on the rendered element, triggering the same function call again -->
Init Club: 3

В моем контроллере: 

  clubService.all()
  .then(function(response) {
    $scope.clubs = response ;
    console.log($scope.clubs) ;  //output above
  }) ;
  $scope.clubCount = 0 ;
  $scope.showClub = function() {
    console.log("Init Club: " +$scope.clubCount) ;
    $scope.clubCount++ ;
  }

Больше всего меня беспокоит то, что когда я перехожу к реальным данным ... в среднем будет отображаться 10 элементов, а не 10 отдельныхкол-во вызовов составит всего 40.

Что заставляет ng-repeat делать это?(при условии, что это проблема).

...