ng 指令的自定义、使用
1、创建和使用
var app = angular.module('myApp',['ng']);
app.directive('指令名称',func);
自定义指令的命名：
驼峰式，有两部分构成，前缀一般是公司或者项目的缩写，后缀表示的为指令的作用(tsHello)
使用指令时：采用烤串式的方式去使用
(ts-hello)
2、高级
属性：
①template 显示的模板内容
②restrict: 'EACM' (E:元素A:属性C:类M：注释)
作为注释去调用自定义指令时，需要设置replace属性为true
③replace 替换
④scope：接收参数
<!DOCTYPE html> <html ng-app="myModule"> <head lang="en"> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title> </head> <body> <!--控制器的调用--> <div ng-controller="myCtrl"> <!-- element--> <ts-hello></ts-hello> <!-- attribute--> <div ts-hello></div> <!-- class--> <div class="ts-hello"></div> <!-- directive: ts-hello --> </div> <script> //模块的创建 var app = angular.module('myModule',['ng']); //创建控制器 app.controller('myCtrl', function ($scope) { }) //创建自定义指令 app.directive('tsHello', function () { return { template:'<h1>Hello Directive</h1>', // E:Element A:Atrribute C:Class M:Comment restrict:'EACM', replace:true } }) </script> </body> </html>
3.调用指令来传递参数并处理：
①在自定义的指令内部去准备接收
指定scope，把要传递过来的值存在驼峰式命名的变量中，指定@，在调用指令传参时，就会读取该属性对应的值
scope:{
testName:'@'
}
②传递参数
在调用指令时，指定对应的属性名称和要传递的值
<div test-hello test-name="123"></div>
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title> </head> <body> <div ng-controller="myCtrl"> <div ts-hello test-name="world"></div> </div> <script> var app = angular.module('myApp', ['ng']); // 创建指令并传参 app.directive('tsHello', function () { return { template:'<span> ' + 'Hello {{testName}}</span>', scope:{ testName:'@' } } }) app.controller('myCtrl', function () { console.log('myCtrl func is called'); }) </script> </body> </html>
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title> </head> <body> <div ng-controller="myCtrl"> </div> <!--调用指令，并通过属性传参--> <ts-directive ts-name="Hello World"></ts-directive> <script> var app = angular.module('myApp', ['ng']); //创建指令 app.directive('tsDirective', function () { return{ template:'<h1>{{tsName}}</h1>', scope:{ tsName:'@'//@取ts-name属性对应的值 } } }) app.controller('myCtrl', function () { console.log('myCtrl func is called'); }) </script> </body> </html>
