Question

我在ng-if指令中包含了一个pagination组件。您可以在视图绑定中看到currentPage更新。控制器每次更改时都会记录当前页面，但它似乎不会在控制器范围内更新。 ng-if指令是否创建了与控制器不同的范围？有人可以解释为什么它没有在下面的代码段中的pageChanged方法中更新吗？

注意：分页组件在ng-if指令之外按预期工作。我只是想了解发生了什么。

＆＃13;

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;
});

＆＃13;

<!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>

＆＃13;

Answer 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>

ng-if中的Angular UI Bootstrap分页

1 个答案: