Angular UI Bootstrap Pagination в нг-если

У меня есть компонент разбиения на страницы, завернутый в директиву ng-if. Вы можете увидеть обновление currentPage в привязке вида. Контроллер регистрирует currentPage каждый раз, когда он изменяется, но, похоже, он не обновляется в рамках контроллера. Директива ng-if создает область действия, отличную от контроллера? Может кто-нибудь объяснить, почему он не обновляется в методе pageChanged во фрагменте ниже?

Примечание. Компонент нумерации страниц работает как положено вне директивы ng-if. Я просто пытаюсь понять, что происходит.

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope, $log) {

  $scope.pageChanged = function() {
    $log.log('Page changed to: ' + $scope.currentPage);
  };
  $scope.maxSize = 5;
  $scope.totalItems = 175;
  $scope.currentPage = 1;
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="PaginationDemoCtrl">
   
    <hr />
    <h4>Limit the maximum visible buttons</h4>
    <h6><code>rotate</code> defaulted to <code>true</code>:</h6>
    <div ng-if="true">
      <uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" num-pages="numPages" ></uib-pagination>
    
      <pre>Page: {{currentPage}} / {{numPages}}</pre>
    </div>

</div>
  </body>
</html>

Источник

1 ответ

Я понял это, ха

$parent.currentPage

позволяет мне получить доступ к текущей странице в родительской области.

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope, $log) {

  $scope.pageChanged = function() {
    $log.log('currentPage is now: ' + $scope.currentPage);
  };
  $scope.maxSize = 5;
  $scope.totalItems = 175;
  $scope.currentPage = 1;
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="PaginationDemoCtrl">
   
    <hr />
    <h4>Limit the maximum visible buttons</h4>
    <h6><code>rotate</code> defaulted to <code>true</code>:</h6>
    <div ng-if="true">
      <uib-pagination total-items="totalItems" ng-model="$parent.currentPage" ng-change="pageChanged()" max-size="maxSize" num-pages="numPages" ></uib-pagination>
    
      <pre>Page: {{currentPage}} / {{numPages}}</pre>
    </div>

</div>
  </body>
</html>

Источник
Другие вопросы по тегам