Angularjs學習筆記

一、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));

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>

調用指令方式如下所示：

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