您好，由于周末有事情，没哟学习angularjs，几天晚上开始继续学习angularjs,坚持加油每一天。谢谢
接着上周五学习了表单验证以后，今天开始学习angularjs中一个非常重要的模块：指令
今天主要先简单了解学习一下指令的一些基本概念后使用
一、指令的简介
指令其实就是angularjs对html的一个扩展，实现自定义html元素
angularjs其自身封装了一些常用的系统指令，我们也可以根据需要自定义指令
二、自定义指令简介
自定义指令的基本格式
app.directive("指令名称",function(){
restrict: '指令匹配格式',
replace: true,是否自定义元素替代指令申明
template: '<a href="http://www.baidu.com">百度一下马上达</a>'
});
自定义指令关键词说明：
指令名称说明:名字一般采用驼峰命名，及首字母小写其余单词大写
在调用时，要将大写字母转换为小写并加上-
举例：myDirectiveTest 调用为：my-directive-test
备注：由于其内部指令是以ng开头，所以为了避免冲突，自定义指令名称不要以ng开头
restrict有四种枚举值：
E：指令按照元素来匹配
使用：<my-directive-test></my-directive-test>
C：按照class来匹配
使用：<div class='my-directive-test'></div>
A：按照属性来匹配
使用：<div my-directive-test></div>
M：按照注释来匹配
<!--directive:my-directive-test-->
虽然提供了四种匹配方式，但是考虑到浏览器的兼容性问题，尽可能按照属性来匹配：A
一个简单的练习：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp"> <my-directive-e></my-directive-e><br /> <div my-directive-a></div><br /> <p class="my-directive-c"></p><br /> </body> </html> <script src="Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.directive("myDirectiveE", function () { return { restrict: "E", replace: true, template: "<a href='http://www.baidu.com'>百度一下马上达</a>" } }); app.directive("myDirectiveA", function () { return { restrict: "A", replace: true, template: "<a href='http://www.baidu.com'>百度一下马上达</a>" } }); app.directive("myDirectiveC", function () { return { restrict: "C", replace: true, template: "<a href='http://www.baidu.com'>百度一下马上达</a>" } }); </script>
三、指令中的数据传递
指令中数据传递采用的方式也是数据绑定方式{{}}
其实数据传递原理是：实现指令中的绑定是和html中属性想匹配
其实现步骤：
1、首先需要给指令创建一个隔离作用域
2、定义与html中属性值匹配方式，有如下匹配方式：
指令中的属性名称:"@html中的属性名称"
指令中的属性名称:"@" 如果只有@那么html中的属性名称必定有指令中的属性名称完全一致
指令中的属性名称:"=html中的属性名称" ，实现html和指令中的数据双向绑定
@匹配方式简单练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp"> <div my-directive-a my-valuess="点击我吧" url="http//:www.baidu.com"></div><br /> </body> </html> <script src="Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.directive("myDirectiveA", function () { return { restrict: "A", replace: true, scope:{ myValuess: "@", myLink:"@url" }, template: "<a href='{{myLink}}'>{{myValuess}}</a>" } }); </script>
通过=实现双向数据绑定练习：
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title></title> <script src="Scripts/angular.js"></script> </head> <body> <label>硬编码的input</label> <input type="text" ng-model="Url"> <div my-directive some-attrs="Url"></div> <script src="../angular.min.js"></script> <script> angular.module('app', []) .directive('myDirective', function() { return { restrict: 'A', replace: true, scope: { myUrl: '=someAttrs', // 等号用做 双向绑定 这里不做详细介绍 }, template: '<div>'+ '<label>指令中的input</label>'+ '<input type="text" ng-model="myUrl">'+ '<a href="{{ myUrl }}">点我试试</a>'+ '</div>' } }) </script> </body> </html>
今天就到此为止，明天继续研究表单验证，明天学习：angularjs内置指令