鍍金池/ 問答/HTML5  HTML/ angularjs中用directive更改scope里的值,在controll

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

我用directive做了一個分頁,在controller聲明了一個$scope.page,當(dāng)點擊下一頁的時候在directive就對這個$scope.page+1,但是在controller中卻沒有改變。
但是在directive中打印,page的值是變了的。
以下是相關(guān)代碼。
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;//總頁數(shù)
            //首頁
            $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]);//創(chuàng)建一個數(shù)組并指定長度,注意不是上限,是長度

                    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();

            });
            //單個按鈕跳轉(zhuǎn)
            $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)
             //這里點擊下一頁再去執(zhí)行一遍這個方法,理論上來說點擊下一頁后這里的$scope.page應(yīng)該+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位置寫的不對。打擾了。。。

2018年1月21日 13:02