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>

directive的重要属性说明：

 　　restrict属性：这个属性可以取四个值得（"ECMA"）,E|元素，C|class，M|注释，A|属性；四个值是可以多选的，例如设置为"EA",表示自定义的指令可以以元素或者属性的方式使用。

　　 template与templateUrl:分别表示字符串形式的模版和Url形式的模版，Url形式的模版以一个地址指向模版文件所在的路径。

　　 link属性：该属性的值是一个函数，这个函数的作用是为特定的元素注册响应事件；需要用到scope参数来完成元素的一些操作。link属性和compile属性之间具有排他性。

　　 compile属性：该属性的值也是一个函数，这个函数的返回值会作为link属性的值（如果有返回值的话），如果要实现的功能是要在DOM渲染前对它进行改变，并且也用不到

　　 scope参数的话，可以使用compile属性。