AngularJS笔记--自定义指令
在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件。AngularJS提供了自定义指令功能，我们可以在指令里面定义特定的html模板。提供给前台html调用.
一. 指令的简单定义.
下面定义了一个简单的控件，点击后调转到博客园。
Note: 1.命名方式:directive必须以小写字母开头，其中如果后面由大写字母，html调用的时候就要用 - 将单词分开.
<html>
<script src='angular.js'></script>
<script type="text/javascript">
angular.module('myapp',[])
.directive('myCnblogs',function(){
return {
restrict: 'E',
replace: false,
template:'<a href="http://www.cnblogs.com/">Go to cnblogs</a>'
}
})
</script>
<head>
<title></title>
<div ng-app='myapp'>
<my-Cnblogs></my-Cnblogs>
</div>
</head>
<body>
</body>
</html>
二.指令元素介绍:
2.1 restrict
常用的restrict有E,A,C三种设置。这些设置可以混用,比如EA,AC。不需要符号隔开
E(Element)：元素,使用格式是<my-directive></my-directive>
A(Propertity): 属性，使用格式:<div my-directive></div>
C(Class): 类, 使用格式:<div class='my-directive'></div>
2.2 repleace
下面是Replace分别设置false和True的效果
2.3 termplate:
template 是设置对应的html模板, 如果有html换行那就要在每一句末尾加上 / 符号. 如果html代码较多，可以通过设置templateurl: urlpath，来加载对应当的代码模板
三. 向指令内部添加数据
3.1 下面通过设置scope简单的实现了数据的绑定.
<!DOCTYPE html>
<html>
<script src='angular.js'></script>
<script type="text/javascript">
angular.module('myapp',[])
.directive('myDirective', function() {
return {
restrict: 'A',
replace: true,
scope:{
myurl:"@",
mycontent:"@"
},
template: '<a href="{{myurl}}">{{mycontent}}</a>'
};
});
</script>
<head>
<title></title>
<div ng-app='myapp'>
<div my-Directive myurl='http://www.cnblogs.com/' mycontent='go to blogs'></div>
</div>
</head>
<body>
</body>
</html>
3.2 深入理解自定义控件scope的绑定
自定义控件绑定$scope分为 @，=，& 三种情况。个人认为@:单向绑定，=：双向绑定，&: 用于绑定函数，下面看看Angularjs权威指南的介绍
@ 本地作用域属性：使用@符号将本地作用域同DOM属性的值进行绑定。
= 双向绑定：通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。 就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变
& 父级作用域绑定 通过&符号可以对父级作用域进行绑定，以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数.
下面的demo实现了对三种情况的绑定.
<!DOCTYPE html>
<html>
<script src='angular.js'></script>
<script type="text/javascript">
angular.module("myApp", [])
.directive("myDir", function() {
return {
restrict: "A",
scope: {
name: "@",
desc: "=",
show: "&"
},
template:
"<div>" +
" <input type='text' ng-model='name' />: <input ng-model='desc' />" +
" <button ng-click='show()'>show</button>" +
"</div>",
replace: true,
link: function (scope, element, attrs) {
console.log("initial value for name:" + scope.name);
console.log("initial value for description:" + scope.amount);
scope.$watch("desc", function (newVal, oldVal) {
console.log("desc has changed " + oldVal + " >> " + newVal);
});
scope.$watch("name", function (newVal, oldVal) {
console.log("name has changed " + oldVal + " >> " + newVal);
});
}
}
})
.controller("myCtrl", function($scope) {
$scope.customerName = "Frank";
$scope.content = 'Learning Angular';
$scope.show = function(source) {
alert(source);
};
}) </script>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> <h3>普通的Angular</h3>
<input type="text" ng-model='customerName'>: <input ng-model="content" />
<button ng-click="show('普通函数')">show</button> <h3>自定义指令</h3>
<div my-dir
name="{{customerName}}"
desc="content"
show="show('自定义指令绑定函数')">
</div>
</body>
</html>
下面是效果图:
四. 总结:
本篇章介绍了自定义指令的简单实用. 可以通过自定义指令封装很多特定功能的html模板，供页面调用。 大家可以试一试将上面demo的 & 修改为 @或者=，经测试修改为@符号，自定义指令的show方法 是无法执行的。如果修改为=号就很有意思了。点击上面的btn，会执行两次show方法。 然后修改任何一个input，下面的show方法都会被执行。如果有博友知道是什么原因也请在线回复一下。这个原理实在 不清楚是什么原因。
AngularJS笔记--自定义指令的更多相关文章
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 走进AngularJs(五)自定义指令----（下）
自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...
- 走进AngularJs(三)自定义指令-----（上）
一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...
- angularJS中自定义指令
学习了angularJS一周,但是大部分时间被自定义指令占用了.博主表示自学互联网好心塞的,发现问题的视觉很狭窄,这比解决问题要更难.这篇文章首先介绍了自定义,然后介绍了在使用自定义指令遇到的问题. ...
- 走进AngularJs(四)自定义指令----（中）
上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...
- angularJS 使用自定义指令输出模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- angularjs Directive自定义指令详解
作用:需要用Directive有下面的情景: 1.使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑. 2. 抽象一个自定义组件,在其他地方进行重用. 3.使用公共代码,减少重复 ...
- Angular 学习笔记——自定义指令之间的交互
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
- Angular 学习笔记——自定义指令
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
随机推荐
- C#学习记录
转眼几个月没更博了,把几个月前学C#的笔记发一下,就记录了点教重要的点子而已 1.打印 Console.WriteLine(); 打印 Console.ReadKey(); 按一个按键继续执行 Con ...
- liunx命令
关机 (系统的关机.重启以及登出 ) shutdown -h now 关闭系统(1) init 0 关闭系统(2) telinit 0 关闭系统(3) shutdown -h hours:minute ...
- Hibernate 表映射 主键生成策略与复合主键
主要分析三点: 一.数据表和Java类的映射 : 二.单一主键映射和主键的生成策略 : 三.复合主键的表映射 : 一.数据表和Java类的映射 Hibernate封装了数据库DDL语句,只需要将数据 ...
- Java基础学习总结——Java对象的序列化和反序列化
一.序列化和反序列化的概念 把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上,通常存 ...
- python学习笔记11 ----网络编程
网络编程 网络编程需要知道的概念 网络体系结构就是使用这些用不同媒介连接起来的不同设备和网络系统在不同的应用环境下实现互操作性,并满足各种业务需求的一种粘合剂.网络体系结构解决互质性问题彩是分层方法. ...
- 【转】窗口之间的主从关系与Z-Order
原文链接:http://www.cnblogs.com/dhatbj/p/3288152.html 说明:这是本人2008年写的一篇旧文,从未公开发表过.其中除了一小段描述Window Mobile平 ...
- Lind.DDD.Domain领域模型介绍
回到目录 Lind.DDD.Domain位于Lind.DDD核心项目中,它主要面向领域实体而设计,由一个IEntity的标识接口,EntityBase基类和N个Entity实体类组成,其中IEntit ...
- SQL Server 索引
SQL Server 中数据存储的基本单位是页(Page).数据库中的数据文件(.mdf 或 .ndf)分配的磁盘空间可以从逻辑上划分成页(从 0 到 n 连续编号).磁盘 I/O 操作在页级执行.也 ...
- Webstorm常用的快捷键
WS的常用操作: 常用快捷键(Keymap/Eclipse): 复制当前行: Ctrl+Alt+↓ 向上/下移动当前行: Alt+↑/↓ 删除当前行: Ctrl+D 注释/取消当前行: Ctrl+/ ...
- 【Swift 2.0】实现简单弹幕功能
前言 简单实现弹幕功能,表跟我谈效率,但也有用队列控制同时弹的数量. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://over ...