好资源导航 » 文章资讯 » AngularJS自定义指令详解（有分页插件代码）

AngularJS自定义指令详解（有分页插件代码）

2024-02-20 10:11:03 164

前言

除了AngularJS内置的指令外，我们还可以创建自定义指令。

通过.directive()函数来添加自定义的指令。

调用自定义指令时，需要在HTMl元素上添加自定义指令名。

自定义指令命名规则：使用驼峰命名法来命名，即除第一个单词外的首字母需大写。如：myDirective。

在html页面调用该指令时需要以-分割，如：my-directive。示例代码：

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

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

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

restrict值的不同，决定了调用方式的不同

属性值调用方式示例 A（Attribute首字母）属性名

C（Class首字母）类名

E（Element首字母）元素名 M 注释

自定义指令模板的templateUrl形式

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

2.transclude

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




自定义指定令内容



模板内容

//模板接收上面自定义指令间的内容

3.什么是scope的父作用域

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

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

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


要动态变化的内容:

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

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

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

其余两种符号用法：





自定义指定令的内容555

5.controller属性

controller属性用于提供对外的接口，即该自定义指令会被其他自定义指令调用。所谓的接口，就是this后的变量或方法。

controller可以使用的参数，作用域、节点、节点的属性、节点内容的迁移，这些都可以通过依赖注入被传进来，所以你可以根据需要只写要用的参数，有$scope,Z$element,$attrs,$transclude。

调用该自定义指令的指令需要放在该指令之间。假定firstDirective指令是要被调用的自定义指令，expander是调用者指令。如下：


{{item.title}}:{{item.text}}

既然firstDirective内部还有指令，则firstDirective必须配置transclude属性为true。代码如下：

//用于被调用的自定义指令
app.directive('firstDirective',function(){
return{
template:'',
replace:true,
transclude:true,
controller:function(){
this.getData=function(val){
vardata=3*val;
returndata;
}
this.a="abc";
}
}
});

调用其他指令的自定义指令必须配置require属性指定指令名。然后在link函数里就可注入要调用的指令。

//自定义指令
app.directive('expander',function(){
return{
templateUrl:'template.html',
replace:true,
transclude:true,
require:'^?firstDirective',//引用其他自定义指令，^表示从父节点开始找，?表示将告诉$compile服务，如果所需的指令没找到，不要抛出异常
scope:{
title:'=attribute'
},
link:function(scope,element,attris,firstDirct){//注入
console.log(firstDirct.a)//调用其他指令的变量
console.log(firstDirct.getData(6))//调用其他指令的方法
}
};
});

6.link属性用法

link后的方法在指令中负责执行DOM操作和注册事件监听器等。link函数有五个参数(scope,element,attrs,controller,linker)。link方法的参数解释：

scope:它与自定义指令里的scope属性是一个东西。它是指令scope的引用，所以可改名为sco等其他名字。scope变量在初始化时是不被定义的，link方法会注册监视器监视值变化事件。

element:包含指令的DOM元素的引用，link方法一般通过jQuery操作实例（如果没有加载jquery，还可以使用Angular'sjqLite）。

controller:在有嵌套指令的情况下使用。这个参数作用在于把子指令的引用提供给父指令，允许指令之间进行交互，如前面的例子。

注意：当调用link方法时，通过值传递（”@”）的scope变量将不会被初始化，它们将会在指令的生命周期中另一个时间点进行初始化，如果你需要监听这个事件，可以使用scope.$watch方法。

7.link与compile的区别

compile函数有三个参数(cElement,cAttrs,cLinker)，使用compile函数可以在ng创建原始dom实例以及创建scope实例之前，改变原始的dom(templateelement)；可以应用于当需要生成多个element实例但只有一个templateelement的情况，ng-repeat就是一个最好的例子。它就在是compile函数阶段改变原始的dom生成多个原始dom节点，然后每个又生成element实例。因为compile只会运行一次,所以当你需要生成多个element实例的时候是可以提高性能的。

link函数有五个参数(scope,element,attrs,ctrl,linker)。

link又分为pre-link和post-link，在代码里直接用pre和post表示，当我们直接使用link时，默认跟post一样。我在网上找了个例子来说明一下区别，代码如下：





Hello

注意打印结果：

levelOne:compile=>


Hello


levelTwo:compile=>

Hello

levelThree:compile=>
Hello
levelOne:prelink=>


Hello



levelTwo:prelink=>

Hello


levelThree:prelink=>
Hello

levelThree:postlink=>
Hello
levelTwo:postlink=>

Hello


levelOne:postlink=>


Hello

分析打印结果：

运行levelone指令中的compile函数，ng就会递归遍历它的dom节点，然后在level-two与level-three上面重复这些操作。所以会依次打印连续三个compile。

pre会在所有compile执行完后且在所有post之前执行。这样可以在执行post前执行一些其他代码，有些类似AOP。

由上面结果可知，post的执行顺序却是先levelthree最后levelone，即反向调用相关联的post-link函数。这么做的好处是，当我们运行levelone时，保证leveltwo与levelthree都已经执行过了，这样就会更安全。所以默认的link就是post。

一个我做过的分页例子

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

html页面代码：

控制器代码：

"usestrict";//严格

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

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

vargetTableDataError=function(result){
alert(result);
};
/*重要的代码，这个paginationConf与自定义指令双向绑定数据*/
$scope.paginationConf={
currentPage:1,
itemsPerPage:10,
pagesLength:9,
search:false,
onChange:function(){
varparam={
"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
*@date2016-05-06
*@authorPeter
*/

angular.module('s.pagination',[]).directive('sPagination',[function(){//自定义指令
return{
restrict:'E',//仅限元素名调用
template:''+
'0">'+
'«'+
''+
'{{item}}'+
''+
'»'+
''+
'0">'+
'第页'+
'每页'+
'/共{{conf.totalItems}}条'+
''+
'暂无数据'+
'',
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数组
functiongetPagination(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);

//judgecurrentPage>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加入这个数组中
varperPageOptionsLength=scope.conf.perPageOptions.length;
//定义状态
varperPageOptionsStatus;
for(vari=0;iscope.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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
                
            
              
            
                                    上一篇
深究AngularJS如何获取input的焦点（自定义指令）
                
                                    下一篇
android Socket实现简单聊天小程序
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            定时生日祝福语简短独特
                        
                                            
                            祝福语简短创意学长学姐
                        
                                            
                            中秋祝福语短句短语简短
                        
                                            
                            男性朋友结婚祝福语简短
                        
                                            
                            周末祝福语简短唯美短句
                        
                                            
                            中秋祝福语简短诗词
                        
                                            
                            老员工退休简短祝福语
                        
                                            
                            老婆最好的祝福语简短
                        
                                            
                            春节公司祝福语简短大气
                        
                                            
                            餐饮节日祝福语大全简短
                        
                                            
                            星期三祝福语简短
                        
                                            
                            明星生日祝福语大全简短
                        
                                            
                            结婚祝福语简短精辟文案
                        
                                            
                            生日祝福语唯美简短男
                        
                                            
                            祝叔叔生日简短祝福语
                        
                                            
                            大学女神节祝福语简短
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            3162201930
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 好资源导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图