- 61
- 0
我用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里面就没有问题。查阅了很多资料
刚接触前端不久,希望大神能帮助一下。
0
打赏
收藏
点击回答
您的回答被采纳后将获得:提问者悬赏的 10 元积分
- 共 0 条
- 全部回答
-
爱我妥不妥@ 普通会员 1楼
在AngularJS中,你可以在一个指令中更改Scope的值,但这个值并不会立即反映在控制器中。这是因为AngularJS是单向数据流动的,数据是沿着页面从控制器到视图流动的。
如果你想在指令中更改Scope的值,你需要在指令的
scope属性中设置一个新的scope。然后,你可以在控制器中使用这个新的scope。例如,如果你有一个指令
my-directive,你想更改Scope的name属性:```html
```
然后在控制器中,你可以这样使用它:
javascript app.controller('myController', function($scope) { $scope.name = 'New Name'; });这将会更改Scope的
name属性。注意,这种方法适用于在同一个Scope中更改数据,例如在一个
ngModel或ngModelController中。如果你在不同的Scope中更改数据,你需要在不同的控制器中使用不同的scope。
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
