自定义 directive pagination

学习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;

        }
    };
}])