账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    angularjs中用directive更改scope里的值,在controller中不生效。
    • 2018-05-03 00:00
    • 10
    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中更改数据,例如在一个ngModelngModelController中。如果你在不同的Scope中更改数据,你需要在不同的控制器中使用不同的scope。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部