自定义 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+}} 到 {{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 = ;

                switch (pageflag) {

                    case "first":

                        newstart = ;

                        break;

                    case "prev":

                        newstart = ($scope.pageIndex - ) * $scope.length;

                        break;

                    case "next":

                        newstart = ($scope.pageIndex) * $scope.length;

                        break;

                    case "last":

                        newstart = ($scope.endIndex - ) * $scope.length;

                        break;

                }

                console.log('setpagination start=' + newstart);

                $scope.start = newstart;

                hassearch = true;

            }

            $scope.pagination = function () {

                $scope.pageIndex = parseInt($scope.start / $scope.length) + ;

                $scope.endIndex = parseInt($scope.recordstotal / $scope.length) + ;

                $scope.first = $scope.pageIndex <=  ? false : true;

                $scope.last = $scope.pageIndex >= $scope.endIndex ? false : true;

                $scope.prev = $scope.pageIndex >  ? 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 = ;

            scope.first = false;

            scope.prev = false;

            scope.next = false;

            scope.last = false;

        }

    };

}])

巴特西

自定义 directive pagination

最新文章

热门文章