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

回答

相關問題