我用directive做了一个分页,在controller声明了一个$scope.page,当点击下一页的时候在directive就对这个$scope.page+1,但是在controller中却没有改变。
但是在directive中打印,page的值是变了的。
以下是相关代码。
directive中:
routerApp.directive("pagination",['$http','localStorageService',function($http,localStorageService) {
return{
scope:{
refresh : '&',
count:'=',
pagesize:'=',
page:'='
},
restrict:'EAC',
replace: true,
templateUrl:'../index/page.html',
controller:function($scope,$element,$attrs,localStorageService){
$scope.totalPage=1;//总页数
//首页
$scope.firstPage=function(){
$scope.page=1;
}
console.log($scope.page)
//下一页
$scope.nextPage= function () {
var page=parseInt($scope.page)+1;
if($scope.totalPage>=page){
$scope.page=page;
console.log($scope)
}else{
//toaster.pop('error', "消息", "已是最后一页");
alert("已是最后一页!")
}
}
//上一页
$scope.upPage= function () {
var page=$scope.page-1;
if(page>0){
$scope.page=page;
}else{
alert("已是第一页");
}
}
$scope.endPage=function(){
$scope.page=$scope.totalPage;
}
$scope.getList=function(){
if(!$scope.totalPage){}else{
var size=10;
var min=parseInt($scope.page)-1;
var max=parseInt($scope.page)+9;
if($scope.totalPage>10){
if(max>$scope.totalPage){
min=parseInt($scope.totalPage)-9;
max=$scope.totalPage;
} else{
if(min==0){
var min=$scope.page;
var max=parseInt($scope.page)+10;
}
}
}else{
size=$scope.totalPage;
min=1;
}
$scope.arrayObj = new Array([size]);//创建一个数组并指定长度,注意不是上限,是长度
for (var i=0;i<size; i++)
{
$scope.arrayObj[i]={key:"dd",value:parseInt(i)+parseInt(min)};
}
}
}
$scope.$watch('page', function(newVal, oldVal) {
if($scope.totalPage>=newVal&&newVal>=1){
$scope.page=newVal;
$scope.refresh();
}else{
$scope.page=oldVal;
alert("超出最大可查询值");
}
// console.log( $scope.page);
$scope.getList();
});
//单个按钮跳转
$scope.setPage=function(page){
$scope.page=page;
}
$scope.$watch('pagesize', function(newVal, oldVal) {
$scope.refresh();
});
$scope.$watch('count', function(newVal, oldVal) {
var z =$scope.count%$scope.pagesize;
if(z==0){
if(Math.floor($scope.count/$scope.pagesize)==0){
$scope.totalPage=1;
}else{
$scope.totalPage=Math.floor($scope.count/$scope.pagesize);
}
}else{
$scope.totalPage=Math.floor($scope.count/$scope.pagesize)+1;
}
$scope.getList();
});
}
};
}]);
page.html
<div class="fy">
<ul class="clearfix">
<li><button ng-click="firstPage()">首页</button></li>
<li><button ng-click="upPage()">上一页</button></li>
<li ng-repeat="i in arrayObj"><span ng-class="{'active':(page==i.value)}" ng-click="setPage(i.value)">{{i.value}}</span></li>
<li><button ng-click="nextPage()">下一页</button></li>
<li><button ng-click="endPage()">尾页</button></li>
<li>共{{totalPage}}页{{count}}条</li>
<li>跳到第<input type="text" ng-model="page">页</li>
</ul>
</div>
controller
routerApp.controller('checkController', ['$scope','$http','localStorageService', '$filter','$location',function($scope,$http,localStorageService, $filter,$location) {
$scope.page=1;
$scope.pagesize=3;
$scope.nashuilist = function () {
console.log($scope)
//这里点击下一页再去执行一遍这个方法,理论上来说点击下一页后这里的$scope.page应该+1 =2了,但是打印后还是显示为 1
var s=angular.element("#startTime").val();
var e=angular.element("#endTime").val();
$http({
method:"GET",
url:"/api/dz/nsdz",
params:{
"startTime":s,
"endTime": e,
"nsrsbh":$scope.nsrsbh,
"page":$scope.page,
"pageSize":$scope.pagesize
},
dataType:"json"
}).success(function (resp) {
if (resp.success) {
$scope.nslist=resp.data.listData;
$scope.count=resp.data.totalRow;
} else {
console.log(resp.message)
}
}).error(function (list) {
//处理错误
console.log("错误")
});
}
$scope.nashuilist();
}]);
页面中是这样引用的。
<pagination count="count" page="page" pagesize="pagesize" refresh="nashuilist()"></pagination>
相同的代码,只不过方法名字换了一下,在另一个controller里面就没有问题。查阅了很多资料
刚接触前端不久,希望大神能帮助一下。
问题解决了,ng-controller位置写的不对。打扰了。。。