ng之自定义指令
最近开始研究并使用angular,今天就来简单讲讲对于ng中自定义指令的一下使用心得吧！
相信用过ng的人都对ng中的指令有所了解，指令，我将其理解为AngularJS操作HTML element的一种途径。 ng中内置了很多指令，其中ng-app, ng-model, ng-controller, ng-click, ng-hide, ng-show, ng-repeat, ng-bind, ng-class等等指令都是比较常用的，虽然内置指令还算丰富，不过对于日常项目中还是有很多功能需要自己来定义指令！
首先，所有的内置指令的前缀都为ng，所以不建议自定义指令使用该前缀，以免冲突。
在ng中使用directive()方法里自定义指令，第一个参数是指令名称字符串其命名方式为驼峰命名法，该函数返回一个对象；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ng之自定义指令</title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
//注意，这里的指令名使用全部小写
app.directive('mydirective', function() {
return {
restrict: 'E',
replace: true,
template: '<h1>hello world!</h1>'
};
});
</script>
</head> <body ng-app='myApp'>
<myDirective></myDirective>
</body>
</html>
上面的例子在浏览器打开之后，在页面会显示hello world!;
注意：在我们自定指令的时候，这里有个小坑，如果你在页面的指令写法是my-directive, 在自定指令的时候指令名得写成驼峰方式'myDirective'。如果在页面中写的是驼峰方式<myDirective>, 在自定义指令的时候必须的全部写成小写'mydirective',否则无法匹配到！
上面是一个简单的例子，这里没有使用scope，link等常用的属性，我们接着看下面这个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ng之自定义指令</title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []); app.directive('hello', function() {
return {
restrict: 'A',
replace: true,
scope: {
myurl: '=', //数据绑定
linktext: '@'//绑定dom中同名的属性
},
template: '<div><label>我的网站:</label><input type="text"ng-model="myurl" />'
+ '<a href="{{myurl}}">{{linktext}}</a></div>'
}
})
</script>
</head> <body ng-app='myApp'>
<div ng-init="myUrl='www.baidu.com'">
<div myUrl="myUrl" linkText='这是一个测试' hello></div>
</div>
</body>
</html>
上面这段代码使用了scope，其中myurl使用的是'='数据双向绑定，也就是说他会随着用户输入的值而改变，linktext使用的是'@'绑定同名属性的值，相当于引用！具体结果大家可以复制以上代码用浏览器打开看看就知道了，这里主要是说明自定义指令中scope的用法！
下面我们在来看看link的用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ng之自定义指令</title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []); app.directive('world', function() {
return {
restrict: 'A',
replace: true,
scope: {
myname: '@', //数据绑定
mysex: '@'//绑定dom中同名的属性
},
link: function(scope, ele, attr) {
ele.bind('click', function() {
alert('我是' + scope.myname + ',我是' + scope.mysex + '生！');
})
}
}
})
</script>
</head> <body ng-app='myApp'>
<div>
<div myName="小明" mySex='男' world>点我点我</div>
</div>
</body>
</html>
大家把上面的代码用浏览器打开看看，就会发现当你点击页面中‘‘点我点我’’这段文字的时候，会弹窗一个alert提示，而这里的点击事件其实就是在自定义指令world的link属性里去绑定的，从这里不难看出，在ng中一般通过自定义指令的link属性去进行各种dom操作会比较方便，包括事件绑定等！而且我个人非常喜欢用指令制作各种插件，目前制作过的有 页面拖拽，字符验证，时间转换，弹框提示等等！这里需要说明一下，ng在解析并编译完指令之后，就会调用指令中的link方法！而指令中的compile方法就是可以自定义指令编译的，只是一般用的较少，而且在自己定义编译指令时，需要手动调用ng内置的compile方法，并且在方法结尾需要返回一个link函数！
下面我们就看一下用compile来改写一下上面的world指令：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ng之自定义指令</title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []); app.directive('world', function() {
return {
restrict: 'A',
replace: true,
scope: {
myname: '@', //数据绑定
mysex: '@'//绑定dom中同名的属性
},
compile: function(container, attr) {
return function(scope, ele, attr) {
ele.bind('click', function() {
alert('我是' + scope.myname + ',我是' + scope.mysex + '生！');
})
}
}
}
})
</script>
</head> <body ng-app='myApp'>
<div>
<div myName="小明" mySex='男' world>点我点我</div>
</div>
</body>
</html>
大家可以在页面运行一下看看，效果是和我们第一个定义的world指令效果一样！
自此，ng中自定义指令的一下常用属性就简单的说完了，当然还有一些如：transcluyde(嵌套), require(依赖)这两个属性，就需要大家自己去研究一下了，这里就不在多说了！感谢大家！
ng之自定义指令的更多相关文章
- ng-repeat里创建的自定义指令
在ng里,所有的指令在按照意愿正常工作之前的都需要编译一下,包含angularJS的自定义指令. ng模板里的所有指令都会在angularJS加载完毕之后编译一下,所以那些自定义指令和事件才能工作. ...
- 走进AngularJs(五)自定义指令----（下）
自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...
- 走进AngularJs(四)自定义指令----（中）
上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...
- 走进AngularJs(三)自定义指令-----（上）
一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...
- AngularJs学习笔记3——自定义指令
指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
- AngularJS -- 指令(创建自定义指令)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 什么是指令 注:本指南是针对已经熟悉AngularJS基础知识的开发人员.如果你才刚 ...
- Angular17 Angular自定义指令
1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲 ...
- AngualrJS之自定义指令
一.指令 指令directive是AngularJS的核心之一 包括 - 用于扩展HTML元素.属性的指令 - 执行特定功能的指令 - 自定义指令 内置指令基本上都是以ng-开头 二.内置指令 1.属 ...
- AngularJS学习笔记（五）自定义指令（1）
先来说说自定义指令 ng通过内置指令的方式实现了对html的增强,同时也赋予了我们自定义指令的功能,让我们根据实际需求进行指令的定制.自定义指令涉及到模板(template).作用域(scope).数 ...
随机推荐
- 开源VS商用，IBM区块链从Hyperledger到商用平台之道 | 对话IBM高级架构师【 笔记】（转）
https://www.toutiao.com/a6520005731867951619/?tt_from=weixin&utm_campaign=client_share× ...
- WPF Dispatcher介绍
微软在WPF引入了Dispatcher,那么这个Dispatcher的主要作用是什么呢?Dispatcher的作用是用于管理线程工作项队列.主线程负责接收输入.处理事件.绘制屏幕等工作,这样一来,UI ...
- EasyUI tabs update 正确用法
来源:http://ewoyaofei.blog.163.com/blog/static/343562612012617111734974/ 一直以为 tabs update 是 easyui 的 b ...
- goaccess生成nginx每日访问纪录
使用php写的,方便点 <?php // 定义全局参数 $date = date("Ymd"); $day = date("d", strtotime(' ...
- Spark 论文篇-RDD：一种为内存化集群计算设计的容错抽象（中英双语）
论文内容: 待整理 参考文献: Resilient Distributed Datasets: A Fault-Tolerant Abstraction for In-Memory Cluster C ...
- c 链表之 快慢指针 查找循环节点
参考:http://blog.csdn.net/wenqian1991/article/details/17452715 上面分析了 根据这张图 推倒出 数学公式. 刚接触 不能一下弄明白.下面结合上 ...
- Cubieboard A10 安装Nand系统，配置nginx,php,mysql,samba详细教程
安装前置条件 1.下载win32diskimager-v0.7-binary.zip 2.下载debian_wheezy_armhf_v1_mele.zip 3.下载cubie_nand_uboot_ ...
- [转]新人常识普及：我们为什么必须会git和maven
转自贴吧:http://tieba.baidu.com/p/3458400116 鉴于本吧多新人,新人又需要多交流才能进步,今天就给新人们讲讲git和maven的必要性,因为,他们的重要性,远远超过很 ...
- Jquery计算指定日期加上多少天、加多少月、加多少年的日期
/* * 功能:实现VBScript的DateAdd功能. * 参数:interval,字符串表达式,表示要添加的时间间隔. * 参数:number,数值表达式,表示要添加的时间间隔的个数. * 参数 ...
- 【javascript】利用 a 标签自动解析 url
很多时候,我们有从 url 中提取域名,查询关键字,变量参数值等的需求,然而我们可以让浏览器方便地帮助我们完成这一任务而不用写正则去抓取.方法就是先创建一个 a 标签然后将需要解析的 url 赋值给 ...