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

directive 中 scope 与 controller 交互,有三种定义策略 "=" ,"@" , "&" 另外一个就是 cope的 双向绑定.是要消耗时间的,并不能立即在controller 中使用 使用:

模版:

     
    
      
        
       
        
         显示 {
   {start+1}} 到 {
   {start+length>recordstotal?recordstotal:start+length}} 项，共 {
   {recordstotal}} 项
        
    
      
    
      
        
       
«
        
       
‹
        
       
{
   { pageIndex }}
        
       
›
        
       
»
    
      
     

定义:

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;                    }    };}])