ng 指令的自定義、使用
阿新 • • 發佈：2017-06-06
str console fun 自定義指令 名稱 tle 目的 utf-8 使用
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:[email protected]
}
②傳遞參數
在調用指令時，指定對應的屬性名稱和要傳遞的值
<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>
ng 指令的自定義、使用