项目筹备近期开启Angular学习，指令比较难理解所以记录备案，推荐视频大漠穷秋 Angular实战 由于篇幅过长,列举大纲如下：
一、指令directive概述
指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jQuery一样效果具有交互性。不同于jQuery，Angular设计核心思想是通过数据与模板的绑定，摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。
几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(<html ng-app="myApp">标签) ng-repeat迭代器指令可以重复标记元素、ng-show指令可以根据条件是否显示一个元素、ng-model指令具有双向数据绑定特性、ng-controller 用来声明一个需要和数据进行绑定的模板区域
二、自定义指令directive之模式匹配restrict
直接上代码体验一把，index.html
<!DOCTYPE html> <html ng-app="myModule"> <head> <meta charset="UTF-8"> <title>Angular指令--自定义标签</title> <script type="text/javascript" src="https://www.jb51.net/framework/1.3.0.14/angular.js"></script> </head> <body> <hello></hello> <div hello></div> <div></div> <!-- directive:hello --> <div></div> <!--代码模板template--> <script type="text/ng-template"> <p>Hello Angular</p> </script> <!--代码模板template--> </body> </html>
指令Directive.js
<script type="text/javascript"> //调用angular对象的module方法来声明一个模块，模块的名字和ng-app的值对应 var myModule = angular.module('myModule',[]); /* restrict 属性值说明 <推荐使用EA> * E--element元素 <hello></hello> * A--attribute 属性 <div hello></div> * C-class 样式类 <div></div> * M 注释 <!-- directive:hello --> */ //指令--对元素绑定事件监听或者改变DOM myModule.directive('hello', function(){ return { restrict: 'EACM', templateUrl:'hello_Angular.html', /*template : '<p>Hello Angular</p>',*/ replace: true } }) </script>
==========================================================
restrict---匹配模式说明， 英文意思是"限制；约束；限定",这里指的是匹配我自定义的标签
==========================================================
•E 元素(element) <hello></hello>
•A 属性(attribute) <div hello></div>
•C 样式类(class) <div></div>
•M 注释 <!-- directive:hello --> 注意！！！空格(不常用)
温馨tips: 推荐使用EC或EA匹配模式
replace 是否替换元素的模式 replace:true浏览器DOM结构如下
replace:false 或没有replace属性时浏览器DOM结构如下
三、指令之嵌套变换transclude
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>transclude 嵌套变换</title> <script type="text/javascript" src="https://www.jb51.net/framework/1.3.0.14/angular.js"></script> </head> <body> <hello>这里是内容哦.....</hello> <div hello>这里是内容哦hello....</div> <script type="text/javascript"> var myApp = angular.module('myApp', []); myApp.directive('hello',function(){ return { restrict: 'EA', template: '<p>Hello World!!!<b ng-transclude></b></p>', transclude: true, /*嵌套变换*/ replace: true /*替换*/ } }) </script> </body> </html>
四、指令directive运行原理
五、指令配置参数说明
myModule.directive('namespaceDirectiveName', function factory(injectables) { var directiveDefinitionObject = { restrict: string,//指令的使用方式，包括标签，属性，类，注释 priority: number,//指令执行的优先级 template: string,//指令使用的模板，用HTML字符串的形式表示 templateUrl: string,//从指定的url地址加载模板或<script type="text/ng-template"></script> replace: bool,//是否用模板替换当前元素，若为false，则append在当前元素上 transclude: bool,//是否将当前元素的内容转移到模板中 scope: bool or object,//指定指令的作用域 controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},//定义与其他指令进行交互的接口函数 require: string,//指定需要依赖的其他指令 link: function postLink(scope, iElement, iAttrs) {...},//以编程的方式操作DOM，包括添加监听器等 compile: function compile(tElement, tAttrs, transclude){ return: { pre: function preLink(scope, iElement, iAttrs, controller){...}, post: function postLink(scope, iElement, iAttrs, controller){...} } }//编程的方式修改DOM模板的副本，可以返回链接函数 }; return directiveDefinitionObject; });
六、指令与控制器的交互
index.html 如下