簡單學習瞭解angularjs中的指令，理解其基本概念、使用規則、簡單的自定義指令 ...
您好，由於周末有事情，沒喲學習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內置指令
