Angularjs學習筆記

標籤：htm   change   分頁   display   學習   rect   指令   angular   ef6   

一、constant

該函數可以將變數註冊在模組中，並以服務的形式進行使用。

例如：

var app = angular.module("MyModule",[]).constant("pageConfig",{pageSize:10});

通過以上方式就定義了一個模組中可用的pageConfig的全域變數，我們在模組中可以跟使用服務一樣使用該變數，例如：

app.controller("MyController",["$scope","pageConfig",function($scope,pageConfig){

　　$scope.pageSize = pageConfig.pageSize;

}]);

通過constant定義的變數，一經定義就不能再修改。後面我們會說到功能和其相似的value函數。

二、directive

directive可用於自訂指令，自訂的指令可以用來擴充HTML的功能。例如，我們可以通過directive建立自己的元素標籤，在下面的代碼中，我們

建立了一個指令lymiPager，該指令用來建立一個實現分頁功能的外掛程式。js部分的代碼如下：

$(function (angular) {    angular.module("lymi.pagerModule", [])        //分頁配置資訊        .constant("pagerConfig", {            initVisiblePageCount: 4,            initCurrentIndex: 1,            initPageCount:0        })        .directive("lymiPager",["pagerConfig",function(pagerConfig) {            return {                link: function (scope, ele, attrs) {                    //分頁外掛程式頁碼改變時的響應函數                    scope.pageChange=function(index) {                        scope.currentIndex = index;                    }                    scope.$watch("currentIndex+pageCount", function () {                        //定義作用於中分頁屬性的預設值                        if (!attrs.currentIndex) {                            scope.currentIndex = pagerConfig.initCurrentIndex;                        } if (!attrs.pageCount) {                            scope.pageCount = pagerConfig.initPageCount;                        } if (!attrs.visiblePageCount) {                            scope.visiblePageCount = pagerConfig.initVisiblePageCount;                        }                        //設定顯示頁碼                        scope.pagenums = [];                        var low = 1, high = 1;                        var showPage = scope.visiblePageCount;                        if (scope.pageCount > 0) {                            if (scope.currentIndex - 1 + showPage <= scope.pageCount) {                                low = scope.currentIndex;                                high = scope.currentIndex - 1 + showPage;                            } else {                                high = scope.pageCount;                                low = (scope.pageCount - showPage < 0 ? 0 : scope.pageCount - showPage) + 1;                            }                        }                        for (; low <= high; low++) {                            scope.pagenums.push(low);                        }                        //調用非正規繫結的函數                        scope.onPageChange();                    });                },                restrict: "E",                scope: {                    pageCount: "=",                    currentIndex: "=",                    visiblePageCount: "@",                    onPageChange:"&"                },                templateUrl: "/html/lymiPager.html"            }        }]);}(angular));

View Code

html代碼如下：

<style>    .lymiPagination {        margin: 0;        padding: 0;    }    .lymiPagination li {        border: 1px solid #99bbee;        color: #0088dd;        list-style: none;        margin: 0;        padding-left: 10px;        padding-right: 10px;        float: left;        cursor: pointer;    }    li.active {        background-color: #0088ff;        color: white;    }</style><ul class="lymiPagination">    <li ng-click="pageChange(1)">首頁</li>    <li ng-click="pageChange(currentIndex>1?currentIndex-1:1)">上一頁</li>    <li ng-class="{active:pagenum===currentIndex}" ng-click="pageChange(pagenum)" ng-repeat="pagenum in pagenums">{{pagenum}}</li>    <li ng-click="pageChange(currentIndex<pageCount?currentIndex+1:currentIndex)">下一頁</li>    <li ng-click="pageChange(pageCount)">尾頁</li></ul>

View Code

調用指令方式如下所示：

<lymi-pager page-count="totalPages" current-index="pageIndex" visible-page-count="4" class="pager" on-page-change="search(searchKey,pageIndex)"></lymi-pager>

 

Angularjs學習筆記