我使用模板文件创建了一个寻呼机小部件,我在 HTML 页面中使用了两次。我有一个选择“转到页面”选项以及上一页和下一页的链接。
问题是,当我使用选择框更新当前页面,然后使用上一页和下一页链接时,当前页面会更新,但选择框不会更新。
请告诉我我做错了什么。我构建这样的寻呼机小部件的方法是否存在逻辑错误?
控制器代码:
var gallery = angular.module('gallery', []);
gallery.controller('ItemListCtrl', ['$scope', function($scope){
/* Pagination Code */
$scope.currentPage = 1;
$scope.itemsPerPage = 24;
$scope.total = 100;
$scope.range = function(min, max, step){
step = step || 1;
var input = [];
for (var i = min; i <= max; i += step) input.push(i);
return input;
};
$scope.prevPage = function (){
if($scope.currentPage > 1){
$scope.currentPage--;
}
};
$scope.nextPage = function (){
if($scope.currentPage < $scope.pageCount()){
$scope.currentPage++;
}
};
$scope.pageCount = function (){
return Math.ceil($scope.total / $scope.itemsPerPage);
};
$scope.setPage = function (n){
if(n >= 0 && n <= $scope.pageCount()){
$scope.currentPage = parseInt(n, 10);
}
};
}]);
这是重现问题的 plnkr URL。
http://plnkr.co/edit/9LUJnVzWAS9BauyORQn5?p=preview http://plnkr.co/edit/9LUJnVzWAS9BauyORQn5?p=preview
根本原因是ng-include
将为目标元素创建一个单独的范围,因此对代码的快速修复是添加$parent
所有范围对象的前缀。
<fieldset class="pager">
<div>Page {{$parent.currentPage}} of {{$parent.pageCount()}}</div>
<div>
<div>
<label>Go to page</label>
<select ng-model='$parent.currentPage' ng-change="$parent.setPage($parent.currentPage)">
<option ng-repeat="n in range(1,$parent.pageCount())" value="{{n}}" ng-selected="n === $parent.currentPage">{{n}}</option>
</select>
</div>
<div>
<a href ng-click="$parent.prevPage()">Previous Page</a>
|
<a href ng-click="$parent.nextPage()">Next Page</a>
</div>
</div>
</fieldset>
每个 Angular 文档了解范围 https://github.com/angular/angular.js/wiki/Understanding-Scopes,当您尝试将 2 路数据绑定(即表单元素、ng-model)到原语时,范围继承将无法按您的预期工作。通过遵循“最佳实践”,可以轻松避免原语的这个问题
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)