码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS自定义指令详解(有分页插件代码)

时间:2016-05-07 11:29:39      阅读:856      评论:0      收藏:0      [点我收藏+]

标签:

前言

除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
通过 .directive() 函数来添加自定义的指令。
调用自定义指令时,需要在HTMl 元素上添加自定义指令名
自定义指令命名规则:使用驼峰命名法来命名,即除第一个单词外的首字母需大写。如: myDirective。
在html页面调用该指令时需要以 - 分割,如: my-directive。示例代码:

<body ng-app="myApp">

<my-directive></my-directive>

<script>
    var app = angular.module("myApp", []);
    app.directive("myDirective", function() {
        return {
            template : "<h1>模板:可以写自己的html页面代码</h1>"
        };
    });
</script>

</body>

html页面调用自定义指令的四种方式

通过在自定义指令里添加 restrict 属性,根据设置不同的值来决定html页面的调用方式,如:

var app = angular.module("myApp", []);
app.directive("myDirective", function() {
    return {
        restrict : "A",//只能通过属性调用
        template : "<h1>自定义指令!</h1>"
    };
});

restrict值的不同,决定了调用方式的不同,如下表:(下表的《》就是<>,因该博客的表中不支持<)

属性值 调用方式 示例
A (Attribute首字母) 属性名 《div my-directive》《/div》
C (Class 首字母) 类名 《div class=”my-directive“》《/div》
E (Element 首字母) 元素名 《my-directive》《/my-directive》
M 注释 《!– 指令: my-directive –》

restrict 默认值为 EA, 即在html页面可通过元素名和属性名来调用自定义指令。

自定义指令属性详解

属性 值类型 说明
restrict string 指令的调用方式,A、C、E、M
priority number 指令执行的优先级
template string 指令使用的模板,可将html页面代码写于此。只能与templateUrl二选其一
templateUrl string 从指定的url地址加载模板。只能与template二选其一
replace boolean 是否用模板替换当前元素。true : 将指令标签替换成temple中定义的内容,页面上不会再有《my-directive》标签;false :则append(追加)在当前元素上,即模板的内容包在《my-directive》标签内部。默认false。
transclude boolean 是否将当前元素的内容转移到模板中
scope boolean /object 指定指令的作用域。false(默认值): 使用父作用域作为自己的作用域。true: 新建一个作用域,该作用域继承父作用域。JavaScript对象:与父作用域隔离,并指定可以从父作用域访问的变量
controller function 定义与其他指令进行交互的接口函数
require string 指定需要依赖的其他指令
link function 以编程的方式操作DOM,包括添加监听器等
compile function 编程的方式修改DOM模板的副本,可以返回链接函数

对表格里的知识进行延伸

1.templateUrl

如果template里拼写的html页面代码十分的多页复杂,拼字符串的话就太麻烦啦,这里我们就可以选择templateUrl。我们可以将要拼写的html页面代码独立到一个页面里,如template.html;然后再指定该html文件所在的路径即可,如templateUrl:”template.html”。用到该自定义指令时,会自动发一个http请求来获取template.html对应的模板内容。这样做的缺点是,多了一个http请求。别急,可以改进的:
angularJS规定了模板还可以用《Script》标签定义:

<script type="text/ng-template" id="template.html">
         <div>自定义指令模板用Script标签定义的方式,须放在html页面ng-controller指令所在标签的内部</div>
</script>

上面代码写在html页面的ng-controller指令所在标签的里面,这样就不用再去请求它了。示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body >
    <div ng-app="myApp" ng-controller="myController">

        <!-- 引用自定义指令 -->
        <my-directive></my-directive>

        <!-- 模板代码:须放在myController所在标签内部 -->
        <script type="text/ng-template" id="template.html">
            <div> 自定义指令模板的templateUrl形式</div>
        </script>
    </div>

    <script>
        //创建模块
        var app = angular.module(‘myApp‘, []);
        //创建控制器
        app.controller(‘myController‘, function($scope) { });
        //创建自定义指令
        app.directive("myDirective", function() {
            return {
                restrict:‘E‘,
                templateUrl : "template.html"
            };
        });
    </script>
</body>

</html>

有多个模板时,我们可以将所有的模板集中在一个文件中,只需加载一次,然后根据id的不同调用不同的模板。

2.transclude

定义是否将当前元素(html页面的自定义指令)的内容转移到模板中。
模板中要接收当前元素内容的标签需要使用ng-transclude指令。

<body >
    <div ng-app="myApp" ng-controller="myController">
        <!-- 引用自定义指令 -->
        <my-directive>自定义指定令内容</my-directive>

        <!-- 模板代码 -->
        <script type="text/ng-template" id="template.html">
            <div> 模板内容</div>
            <div ng-transclude></div>//模板接收上面自定义指令间的内容
        </script>
    </div>

    <script>
        //创建模块
        var app = angular.module(‘myApp‘, []);
        //创建控制器
        app.controller(‘myController‘, function($scope) {  });
        //创建自定义指令
        app.directive("myDirective", function() {
            return {
                templateUrl : "template.html",
                 transclude : true//转移到模板中
            };
        });
    </script>
</body>

3.什么是scope的父作用域

引用自定义指令的html页面的控制器所能控制的范围。下面代码的父作用域就是myController所控制的范围

<body >
    <div ng-app="myApp" ng-controller="myController">       
        <my-directive></my-directive><!-- 引用自定义指令 -->
    </div>

    <script>
        //创建模块
        var app = angular.module(‘myApp‘, []);
        //创建控制器
        app.controller(‘myController‘, function($scope){ });
        //创建自定义指令
        app.directive("myDirective", function() {
            return {
                template : "<h1>自定义指令!</h1>"
            };
        });
    </script>
</body>

4.scope属性的值是对象(object)时的用法

AngularJS内置指令的用法:ng-model=”obj”,通过obj这个变量双向绑定值,controller里变了,html页面也跟着变化。这说明,内置指令不仅可作为属性,还可动态改变值,这个要是不懂的,看看基础语法。如下代码:

<div ng-app="myApp" ng-controller="myController">
    要动态变化的内容: <input ng-model="obj">
</div>

<script>
    var app = angular.module(‘myApp‘, []);
    app.controller(‘myController‘, function($scope) {
        $scope.obj = "这个字符串值会同步到html里";
    });
</script>

自定义指令当然也需要实现这种功能啦。scope属性为对象时,可为自定义指令指定一个可以绑定值的属性。这里还得说明一下的是,这个scope属性与自定义指令里link属性里的scope参数是一个变量。

<!-- =符号的用法-->
<body >
    <div ng-app="myApp" ng-controller="myController">
        <!-- 引用自定义指令:obj变量与控制器里的objc变量双向绑定了值 -->
        <my-directive speak="obj"></my-directive>
    </div>

    <script>
        //创建模块
        var app = angular.module(‘myApp‘, []);

        //创建控制器
        app.controller(‘myController‘, function($scope) { 
            $scope.obj="父作用域";//父作用域给自定义指令属性赋的值
        });

        //创建自定义指令
        app.directive("myDirective", function() {
            return {
                template : "<p>模板内容</p>",
                scope:{
                    title:"=speak"//定义一个speak属性供html页面的自定义指令用。如果写成title:"="格式,则自定义指令里的属性名就是title。
                },
                link: function postLink(scope, iElement, iAttrs) {
                    console.log(scope.title)//这里打印的值与控制器里的值一样
                }
            };
        });
    </script>
</body>

有了前面的一个示例,下面再来说说绑定策略:即用符号前缀给自定义指令传值。它是一个键值对,键是在自定义指令中使用的,值里符号后面的字符串是html页面自定义指令的属性名;如果值里只有符号,则html页面自定义指令的属性名就是键名。

符号 说明 示例
@ 值传递,单向绑定。html页面自定义指令里的val属性的值可传给link的scope使用。第一种写法——str : “@”,这种写法html页面的指令属性名为str str : “@val”,属性名为val
= 双向绑定数据到指令的属性中,数据值可以是任意类型的。第一种写法:name : “=”,这种写法html页面的自定义指令属性名就是name name : “=username”,属性名是username
& 使用父作用域中的一个函数,可以在指令中调用。第一种写法:getName:”&”,这种写法html页面的自定义指令属性名就是gegName getName : “&getUserName”,属性名是getUserName

其余两种符号用法:

<!-- @符号的用法 -->
<body >
    <div ng-app="myApp" ng-controller="myController">
        <!-- 引用自定义指令 -->
        <my-directive title="obj" str="abcd">自定义指定令的内容555</my-directive>
    </div>

    <script>
        //创建模块
        var app = angular.module(‘myApp‘, []);
        //创建控制器
        app.controller(‘myController‘, function($scope) { 
            $scope.obj="父作用域";//父作用域给自定义指令属性赋的值
        });
        //创建自定义指令
        app.directive("myDirective", function() {
            return {
                template : "<p >模板内容</p>",
                scope:{
                    title:"=",
                    str:"@"
                },
                link: function postLink(scope, iElement, iAttrs) {
                    console.log(scope.str)
                    console.log(scope.title)
                }
            };
        });
    </script>
</body>
<!-- &符号的用法 -->
<body >
    <div ng-app="myApp" ng-controller="myController">
        <!-- 引用自定义指令 -->
        <my-directive fun="test()"></my-directive>
    </div>

    <script>
        //创建模块
        var app = angular.module(‘myApp‘, []);
        //创建控制器
        app.controller(‘myController‘, function($scope) { 
            $scope.test = function(){
                    console.log(‘自定义指令会调用该法,所以这句话会打印到控制台上‘)
            }
        });
        //创建自定义指令
        app.directive("myDirective", function() {
            return {
                template : "<p >模板内容</p>",
                scope:{
                    fun:"&"//属性名直接是fun
                },
                link: function postLink(scope, iElement, iAttrs) {
                    scope.fun();//调用父作用域的方法,好似不能传参,未深究。
                }
            };
        });
    </script>
</body>

5.link属性用法

link后的方法在指令中扮演着重要的角色。它负责执行DOM 操作和注册事件监听器等。link 方法包含以下参数:
scope: 它与自定义指令里的scope属性是一个东西。即指令scope的引用,可改名为scop。scope 变量在初始化时是不被定义的,link 方法会注册监视器监视值变化事件。
element: 包含指令的DOM元素的引用, link 方法一般通过jQuery 操作实例(如果没有加载jQuery,还可以使用Angular’s jqLite )。
controller: 在有嵌套指令的情况下使用。这个参数作用在于把子指令的引用提供给父指令,允许指令之间进行交互, tab 指令就是使用该参数较典型的例子:http://jsfiddle.net/powertoolsteam/GBE7N/1/
注意,当调用link 方法时, 通过值传递(”@”)的scope 变量将不会被初始化,它们将会在指令的生命周期中另一个时间点进行初始化,如果你需要监听这个事件,可以使用scope.$watch 方法。

一个我做过的分页例子

之所以展示这个代码,主要是给一些朋友看看真实的项目,,多余的东西删掉了,具体的注入这里就不在讲了。
html页面代码:

<div class="wp-20" ng-controller="AppStatisticController" ng-cloak>
    <div class="panel-footer">
        <s-pagination conf="paginationConf"></s-pagination>
    </div>
</div>

控制器代码:

"use strict";//严格

define(["application-configuration", "s-pagination", "tableDataService"], function (app) {
    app.register.controller("AppStatisticController", ["$scope", "$rootScope", "$stateParams","$http", "tableDataService",
        function($scope, $rootScope, $stateParams, $http, tableDataService) {        

            var getTableDataSuccess = function(result) {
                if(result.c == 1) {
                    $scope.title = result.title;
                    $scope.lists = result.pageList;
                    $scope.total = result.data;
                    $scope.paginationConf.totalItems = result.total;
                }else if(result.c == 2){
                    //弹出框,没有查到数据 
                } else {
                    alert(result.i);
                }
            };

            var getTableDataError = function(result) {
                alert(result);
            };
            /*重要的代码,这个paginationConf与自定义指令双向绑定数据*/
            $scope.paginationConf = {
                currentPage: 1,
                itemsPerPage: 10,
                pagesLength: 9,
                search: false,
                onChange: function() {
                    var param = {
                        "pageNo": this.currentPage,
                        "pageSize": this.itemsPerPage,
                        "timeType": $scope.formData.timeType,
                        "adStyle":$scope.formData.adStyle,
                    };
                    param.appId = $stateParams.appId;
                    tableDataService.getTableData(
                        param,
                        "ims/appStat.do",
                        getTableDataSuccess,
                        getTableDataError
                    );
                }
            };

            $scope.$watch("formData",function(newValue,oldValue, scope) {
                if(newValue.keywords == oldValue.keywords) {
                       $scope.paginationConf.search = true;
                }
            }, true);

       }]);
});

自定义指令代码:也算是angularJS的分页插件

/**
 * 分页插件封装s-pagination.js
 * @date 2016-05-06
 * @author Peter
 */

angular.module(‘s.pagination‘, []).directive(‘sPagination‘,[function(){//自定义指令
    return {
        restrict: ‘E‘,//仅限元素名调用
        template: ‘<div class="page-list">‘ +
        ‘<ul class="pagination" ng-show="conf.totalItems > 0">‘ +
        ‘<li ng-class="{disabled: conf.currentPage == 1}" ng-click="prevPage()"><span>&laquo;</span></li>‘ +
        ‘<li ng-repeat="item in pageList track by $index" ng-class="{active: item == conf.currentPage, separate: item == \‘...\‘}" ‘ +
        ‘ng-click="changeCurrentPage(item)">‘ +
        ‘<span>{{ item }}</span>‘ +
        ‘</li>‘ +
        ‘<li ng-class="{disabled: conf.currentPage == conf.numberOfPages}" ng-click="nextPage()"><span>&raquo;</span></li>‘ +
        ‘</ul>‘ +
        ‘<div class="page-total" ng-show="conf.totalItems > 0">‘ +
        ‘第<input type="text" ng-model="jumpPageNum"  ng-keyup="jumpToPage($event)"/>页 ‘ +
        ‘每页<select ng-model="conf.itemsPerPage" ng-options="option for option in conf.perPageOptions "></select>‘ +
        ‘/共<strong>{{ conf.totalItems }}</strong>条‘ +
        ‘</div>‘ +
        ‘<div class="no-items" ng-show="conf.totalItems <= 0">暂无数据</div>‘ +
        ‘</div>‘,
        replace: true,
        scope: {
            conf: ‘=‘//双向绑定数据
        },
        link: function(scope, element, attrs){
            // 变更当前页
            scope.changeCurrentPage = function(item) {
                if(item == ‘...‘){
                    return;
                }else{
                    scope.conf.currentPage = item;
                }
            };

            // 定义分页的长度必须为奇数 (default:5)
            scope.conf.pagesLength = parseInt(scope.conf.pagesLength) ? parseInt(scope.conf.pagesLength) : 5 ;
            if(scope.conf.pagesLength % 2 === 0){
                // 如果不是奇数的时候处理一下
                scope.conf.pagesLength = scope.conf.pagesLength -1;
            }

            // conf.erPageOptions
            if(!scope.conf.perPageOptions){
                scope.conf.perPageOptions = [10, 20, 30, 40, 50];
            }

            // pageList数组
            function getPagination(newValue, oldValue) {
                //新增属性search   用于附加搜索条件改变时触发
                if(newValue[1] != oldValue[1] || newValue[2] != oldValue[2]) {
                    scope.conf.search = true;
                }
                // conf.currentPage
                scope.conf.currentPage = parseInt(scope.conf.currentPage) ? parseInt(scope.conf.currentPage) : 1;

                // conf.totalItems
                scope.conf.totalItems = parseInt(scope.conf.totalItems) ? parseInt(scope.conf.totalItems) : 0;

                // conf.itemsPerPage (default:15)
                scope.conf.itemsPerPage = parseInt(scope.conf.itemsPerPage) ? parseInt(scope.conf.itemsPerPage) : 15;

                // numberOfPages
                scope.conf.numberOfPages = Math.ceil(scope.conf.totalItems/scope.conf.itemsPerPage);

                // judge currentPage > scope.numberOfPages
                if(scope.conf.currentPage < 1){
                    scope.conf.currentPage = 1;
                }

                // 如果分页总数>0,并且当前页大于分页总数
                if(scope.conf.numberOfPages > 0 && scope.conf.currentPage > scope.conf.numberOfPages){
                    scope.conf.currentPage = scope.conf.numberOfPages;
                }

                // jumpPageNum
                scope.jumpPageNum = scope.conf.currentPage;

                // 如果itemsPerPage在不在perPageOptions数组中,就把itemsPerPage加入这个数组中
                var perPageOptionsLength = scope.conf.perPageOptions.length;
                // 定义状态
                var perPageOptionsStatus;
                for(var i = 0; i < perPageOptionsLength; i++){
                    if(scope.conf.perPageOptions[i] == scope.conf.itemsPerPage){
                        perPageOptionsStatus = true;
                    }
                }
                // 如果itemsPerPage在不在perPageOptions数组中,就把itemsPerPage加入这个数组中
                if(!perPageOptionsStatus){
                    scope.conf.perPageOptions.push(scope.conf.itemsPerPage);
                }

                // 对选项进行sort
                scope.conf.perPageOptions.sort(function(a, b){return a-b});

                scope.pageList = [];
                if(scope.conf.numberOfPages <= scope.conf.pagesLength){
                    // 判断总页数如果小于等于分页的长度,若小于则直接显示
                    for(i =1; i <= scope.conf.numberOfPages; i++){
                        scope.pageList.push(i);
                    }
                }else{
                    // 总页数大于分页长度(此时分为三种情况:1.左边没有...2.右边没有...3.左右都有...)
                    // 计算中心偏移量
                    var offset = (scope.conf.pagesLength - 1)/2;
                    if(scope.conf.currentPage <= offset){
                        // 左边没有...
                        for(i =1; i <= offset +1; i++){
                            scope.pageList.push(i);
                        }
                        scope.pageList.push(‘...‘);
                        scope.pageList.push(scope.conf.numberOfPages);
                    }else if(scope.conf.currentPage > scope.conf.numberOfPages - offset){
                        scope.pageList.push(1);
                        scope.pageList.push(‘...‘);
                        for(i = offset + 1; i >= 1; i--){
                            scope.pageList.push(scope.conf.numberOfPages - i);
                        }
                        scope.pageList.push(scope.conf.numberOfPages);
                    }else{
                        // 最后一种情况,两边都有...
                        scope.pageList.push(1);
                        scope.pageList.push(‘...‘);

                        for(i = Math.ceil(offset/2) ; i >= 1; i--){
                            scope.pageList.push(scope.conf.currentPage - i);
                        }
                        scope.pageList.push(scope.conf.currentPage);
                        for(i = 1; i <= offset/2; i++){
                            scope.pageList.push(scope.conf.currentPage + i);
                        }

                        scope.pageList.push(‘...‘);
                        scope.pageList.push(scope.conf.numberOfPages);
                    }
                }

                if(scope.conf.onChange){
                    //请求数据
                    if(scope.conf.search) {
                        scope.conf.onChange();
                        scope.conf.search = false;
                    }

                }
                scope.$parent.conf = scope.conf;
            }

            // prevPage
            scope.prevPage = function(){
                if(scope.conf.currentPage > 1){
                    scope.conf.currentPage -= 1;
                }
            };
            // nextPage
            scope.nextPage = function(){
                if(scope.conf.currentPage < scope.conf.numberOfPages){
                    scope.conf.currentPage += 1;
                }
            };

            // 跳转页
            scope.jumpToPage = function(){
                scope.jumpPageNum = scope.jumpPageNum.replace(/[^0-9]/g,‘‘);
                if(scope.jumpPageNum !== ‘‘){
                    scope.conf.currentPage = scope.jumpPageNum;
                }
            };

            scope.$watch(function() {

                if(!scope.conf.totalItems) {
                    scope.conf.totalItems = 0;
                }
                if(angular.isUndefined(scope.conf.search)) {
                    scope.conf.search = false;
                }

                var newValue = [scope.conf.totalItems, scope.conf.currentPage, scope.conf.itemsPerPage, scope.conf.search];
                return newValue;
            }, getPagination, true);
        }
    };
}]);

AngularJS自定义指令详解(有分页插件代码)

标签:

原文地址:http://blog.csdn.net/zcl_love_wx/article/details/51331539

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!