Learning angular process, the directive is not very understanding, it is necessary to write one, in order to know its various aspects of the way to deal with.
Directive scope and controller interaction, there are three kinds of definition policy "=", "@", "&"
The other one is Cope's two-way binding. It is time consuming and cannot be used immediately in the controller
Use:
<mypagination start="start" length="length" recordstotal ="recordstotal" searchgrid="search ()">< /mypagination>
Template:
<div> <ulclass="pagination Pull-left"> <liclass="footable-page Disabled"><div> Display {{start+1}} to {{start+length>recordstotal?recordstotal:start+length}} items, total {{recordstotal}} items </div></li> </ Ul> <ulclass="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> <liclass="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>
Defined:
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) {varHassearch =false; $scope. Setpagination=function (pageflag) {varNewstart =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; } };}])
Custom Directive pagination