码迷,mamicode.com
首页 > 其他好文 > 详细

自定义 directive pagination

时间:2016-07-21 17:47:54      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

 学习angular过程中,对directive 不是很了解,很有必要自己写一个,以便知道它的各方面的处理方式.

directive 中 scope 与 controller 交互,有三种定义策略 "=" ,"@" , "&"

另外一个就是 cope的 双向绑定.是要消耗时间的,并不能立即在controller 中使用

使用:

<mypagination start="start" length="length" recordstotal="recordsTotal" searchgrid="search()"></mypagination>

模版:

<div>
    <ul class="pagination pull-left">
        <li class="footable-page disabled"><div>显示 {{start+1}} 到 {{start+length>recordstotal?recordstotal:start+length}} 项,共 {{recordstotal}} 项</div></li>
    </ul>
    <ul class="pagination pull-right">
        <li ng-class="{disabled:!first}"><a ng-click="setpagination(‘first‘)">«</a></li>
        <li ng-class="{disabled:!prev}"><a ng-click="setpagination(‘prev‘)">‹</a></li>
        <li class="disabled"><a>{{ pageIndex }}</a></li>
        <li ng-class="{disabled:!next}"><a ng-click="setpagination(‘next‘)">›</a></li>
        <li ng-class="{disabled:!last}"><a ng-click="setpagination(‘last‘)">»</a></li>
    </ul>
</div>

定义:

app.directive(mypagination, [$rootScope, function ($rootScope) {
    return {
        restrict: E,        
        templateUrl: /Scripts/App/tpls/mgitem/pagination.tpl.html,
        replace: true,
        transclude: true,
        scope: {
            start: =,
            length: =,
            recordstotal: =,
            searchgrid: &
        },
        controller: function ($scope, $element, $rootScope) {
            var hassearch = false;            
            $scope.setpagination = function (pageflag) {
                var newstart = 0;
                switch (pageflag) {
                    case "first":
                        newstart = 0;
                        break;
                    case "prev":
                        newstart = ($scope.pageIndex - 2) * $scope.length;
                        break;
                    case "next":
                        newstart = ($scope.pageIndex) * $scope.length;
                        break;
                    case "last":
                        newstart = ($scope.endIndex - 1) * $scope.length;
                        break;
                }

                console.log(setpagination start= + newstart);
                $scope.start = newstart;
                hassearch = true;               
            }

            $scope.pagination = function () {
                $scope.pageIndex = parseInt($scope.start / $scope.length) + 1;
                $scope.endIndex = parseInt($scope.recordstotal / $scope.length) + 1;
                $scope.first = $scope.pageIndex <= 1 ? false : true;
                $scope.last = $scope.pageIndex >= $scope.endIndex ? false : true;
                $scope.prev = $scope.pageIndex > 1 ? true : false;
                $scope.next = $scope.pageIndex < $scope.endIndex ? true : false;

                console.log(pagination recordstotal= + $scope.recordstotal);
            }

            $scope.$watch(recordstotal, function () {
                console.log(watch recordstotal);
                $scope.pagination();
            });

            $scope.$watch(start, function () {
                console.log(watch start);
                if (hassearch)
                {
                    $scope.searchgrid();
                    hassearch = false;
                }
                $scope.pagination();
            });
        },
        compile: function(tElem, tAttrs){
            //console.log(name + ‘: compile‘);
            return {
                pre: function(scope, iElem, iAttrs){
                    //console.log(scope.recordstotal + ‘: pre compile‘);
                },
                post: function(scope, iElem, iAttrs){
                    //console.log(scope.recordstotal + ‘: post compile‘);
                }
            }
        },
        link: function (scope, element, attris) {            
            scope.pageIndex = 1;
            scope.first = false;
            scope.prev = false;
            scope.next = false;
            scope.last = false;

            
        }
    };
}])

 

自定义 directive pagination

标签:

原文地址:http://www.cnblogs.com/CoreXin/p/5692244.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!