Angular UI Bootstrap分页在ng-if

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

注意：分页组件在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>

来源

2017-04-05 urnotmydad

我的理解是，当前页的内NG-如果指令是在控制器以下儿童的范围。该父级控制器是否完全无法访问子范围？ – urnotmydad

我想通了，哈

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

来源

2017-04-05 14:29:38 urnotmydad

有同样的问题，但是有numPages。我不会绑定，因为ng-if（使用ng-show）。所以我不得不编写num-pages =“$ parent.numPages”，以便能够使用{{numPages}}访问变量。非常感谢！ – Roux

Angular UI Bootstrap分页在ng-if

回答

相关问题