2017-04-05 3 views
0

Ich habe eine pagination Komponente in einer ng-if-Anweisung verpackt. Sie können die Aktualisierung von currentPage in der Ansichtsbindung sehen. Der Controller protokolliert den currentPage bei jeder Änderung, aber er scheint sich nicht innerhalb des Bereichs des Controllers zu aktualisieren. Ist die ng-if-Anweisung ein anderer Bereich als der Controller? Kann jemand erklären, warum es innerhalb der pageChanged-Methode im folgenden Snippet nicht aktualisiert wird?Angular UI Bootstrap Paginierung in ng-if

Hinweis: Die Paginierungskomponente funktioniert wie erwartet außerhalb einer ng-if-Anweisung. Ich versuche nur zu verstehen, was vor sich geht.

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>

+0

Was ich verstehe, ist, dass innerhalb der current ng-wenn-Richtlinie in einem Kind Umfang unter der Steuerung. Ist dieser untergeordnete Bereich dem übergeordneten Controller vollständig nicht zugänglich? – urnotmydad

Antwort

1

ich es herausgefunden, hah

$parent.currentPage 

mich current im übergeordneten Bereich zugreifen können.

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>

+0

Hatte das gleiche Problem, aber mit numPages. Ich würde wegen des ng-if (arbeiten mit ng-show) nicht binden. Also musste ich num-pages = "$ parent.numPages" schreiben, um mit {{numPages}} auf die Variable zugreifen zu können. Vielen Dank! – Roux

Verwandte Themen