Angularjs 学习笔记

2018-06-22 07:48:10来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

directive的重要属性说明:

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

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

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

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

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:克隆对象的几种方法

下一篇:RabbitMQ安装配置和基于EasyNetQ驱动的基础使用