Функция ng-click не работает с элементами управления dir-pagination в Angular Js?

Question

Я реализовал разбиение на страницы на нашем веб-сайте на разных вкладках, и он работает должным образом, но проблема в том, что после переключения вкладки мы вызвали другую функцию для получения списка, но одновременно при изменении страницы будет срабатывать каждый раз.ng-click это триггер, но не Woking правильно, скажите, кто-нибудь, как решить эту проблему?

<div class="tab-pane fade in active">
<div class="container" ng-if="!isNoRecordFound">			

<div class="row hotel-list-box bg_gray margin-b15 boxshadow" 
  dir-paginate="airport in airportlist | itemsPerPage: 10" 
        total-items="total_count" current-page="currentPage" pagination-id="airportPagination">

  <div class="col-md-5 padding-lr0">
    <div class="image-box border-radius10">
      <img ng-src="{{airport.img}}" class="img-responsive">
    </div>
  </div><!-- end of col-md-5 -->
  <div class="col-md-7">
    <div class="content-box">
      <div class="box-heading">
        <h3 class="f-18 black padding-l15">{{airport.name}}</h3>
      </div>
      <div class="row">
        <div class="col-md-8">
          <div class="box-details padding-t20 block">
            <span ng-if="airport.rating == 5">
              <div class="relative inline-block">
                <img src="images/excellent-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix darkgreen f-18"> Excellent</span>
              </div>
            </span>
            <span ng-if="airport.rating == 4">
              <div class="relative inline-block">
                <img src="images/very-good-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix lightgreen f-18"> Very Good</span>
              </div>
            </span>
            <span ng-if="airport.rating == 3">
              <div class="relative inline-block">
                <img src="images/good-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix yellow f-18"> Good</span>
              </div>
            </span>
            <span ng-if="airport.rating == 2">
              <div class="relative inline-block">
                <img src="images/poor-medium.png" class="img-responsive padding-l15">
                <span class="clearfix lightgreen f-18"> Poor </span>
              </div>
            </span>
            <span ng-if="airport.rating == 1">
              <div class="relative inline-block">
                <img src="images/very-poor-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix lightgreen f-18"> Very Poor</span>
              </div>
            </span>
            <span ng-if="airport.rating == 0">
              <div class="relative inline-block">
                <img src="images/poor-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix lightgreen f-18">Not Rated</span>
              </div>
            </span>
          </div>
        </div>
        <div class="col-md-4">
          <div class="box-button margin-t40">

            <button class="border-none white border-radius5 padding-tb10 padding-lr35
                bg_darkblue" data-toggle="modal" data-target="#ratingModel"
                ng-click="getRatingList(airport, 'airport')">
                Rating Chart
            </button>
          </div>
        </div>
      </div>
    </div><!-- end of content-box -->
  </div><!-- end of col-md-7 -->
</div>
</div>
<div class="notFound" ng-if="isNoRecordFound">
Not found any result
</div>
<span ng-if="selectedTab == 'Airport & Services'">
<dir-pagination-controls
     max-size="8"
     direction-links="true"
     boundary-links="true" 
     on-page-change="filterDataInRatingChart(newPageNumber, 'Airport')">
  </dir-pagination-controls>
</span>
</div>

Answer 1

Если вы хотите сохранить триггер события ' on-page-change ' независимым между элементами, вы можете использовать 'pagination-id'.Вот возможный пример использования: На элементах управления dir-pagination :

<dir-pagination-controls
 pagination-id="yourIdPagination"
 on-page-change="eventOnPageChange(newPageNumber)">
</dir-pagination-controls>

В таблице / списке ваш контроль нумерации страниц должен ссылаться на :

<table>
 <tr
  dir-paginate="item in items|filter:search|itemsPerPage:10"
  current-page="currentPage"
  pagination-id="yourIdPagination"
  total-items={{total_count}}>
   <td>{{item.Id}}</td>
 </tr>
</table>

Так что дляпример если у вас есть два списка на одной странице , и у каждого списка есть своя нумерация страниц, вы должны установить разные 'pagination-id' для каждого списка.Код будет выглядеть примерно так:

<dir-pagination-controls
     pagination-id="firstIdPagination"
     on-page-change="eventOnPageChange(newPageNumber)">
    </dir-pagination-controls>

 <table>
    <tr
     dir-paginate="item in items|filter:search|itemsPerPage:10"
     current-page="currentPage"
     pagination-id="firstIdPagination"
     total-items={{total_count}}>
      <td>{{item.Id}}</td>
    </tr>
 </table>

<dir-pagination-controls
         pagination-id="secondIdPagination"
         on-page-change="eventOnPageChange(newPageNumber)">
        </dir-pagination-controls>

 <table>
        <tr
         dir-paginate="item in items|filter:search|itemsPerPage:10"
         current-page="currentPage"
         pagination-id="secondIdPagination"
         total-items={{total_count}}>
          <td>{{item.Id}}</td>
        </tr>
 </table>

Между тем если у вас есть 2 или более «dir-pagination-controls», ссылающихся на один и тот же список списка вы должны удалить 'Событие on-page-change из других «dir-pagination-controls» с тем же «pagination-id», потому что в противном случае событие сработало бы 2 или более раз.Код будет выглядеть примерно так:

<dir-pagination-controls
             pagination-id="airportIdPagination"
             on-page-change="eventOnPageChange(newPageNumber)">
            </dir-pagination-controls>

 <table>
        <tr
         dir-paginate="item in items|itemsPerPage:10"
         current-page="currentPage"
         pagination-id="airportIdPagination"
         total-items={{total_count}}>
          <td>{{item.Id}}</td>
        </tr>
 </table>
<!--Notice that I've removed the event 'on-page-change' from the second one, because if not it would trigger twice-->
<dir-pagination-controls
             pagination-id="airportIdPagination">
            </dir-pagination-controls>

Надеюсь, эти примеры помогут вам разобраться.