angularjs中用directive更改scope里的值,在controller中不生效。

我用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里面就没有问题。查阅了很多资料
刚接触前端不久,希望大神能帮助一下。

阅读 2.4k
1 个回答
新手上路,请多包涵

问题解决了,ng-controller位置写的不对。打扰了。。。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题