javascript
AngularJS中Directive指令系列 - 基本用法
參考：
https://docs.angularjs.org/api/ng/service/$compile
http://www.zouyesheng.com/angular.html
Directive (指令)，是Angular最為強大和復雜的部分。directive可以擴展豐富html的行為。
舉個例子，如果我們想讓html某元素在屏幕上居中顯示，我們無需知道屏幕窗口實際的寬度，只需加上align="center"屬性就能達到目的。
這是html提供給我們好的接口行為。但是如果想要元素在屏幕的1/3位置顯示，這就有些困難了。因為html并沒有提供給我們這種語法。
我們可以通過directive定義一些新的行為，然后讓Angular提供的HTML compiler(編譯器)去解析并編譯行為。更進一步，當我們開發(fā)應用系統(tǒng)，我們甚至可以為該應用創(chuàng)建特定的directive。
即Domain Specific Language 領域特定語言。
?
使用指令可以增強復用性。節(jié)省很多代碼。
定義指令可以使用下面的寫法模板
var myModule = angular.module(...); myModule.directive('directiveName', function factory(injectables) {var directiveDefinitionObject = {priority: 0,template: '<div></div>',templateUrl: 'directive.html',replace: false,transclude: false,restrict: 'A',scope: false,compile: function compile(tElement, tAttrs, transclude) {return {pre: function preLink(scope, iElement, iAttrs, controller) { ... },post: function postLink(scope, iElement, iAttrs, controller) { ... }}},link: function postLink(scope, iElement, iAttrs) { ... }};return directiveDefinitionObject; });由上可知，定義指令，需要返回一個對象。對象中包含很多屬性如restrict，replace等。下面根據例子介紹每個屬性的用法。
?
例1
See the Pen 1. basic by finley (@mafeifan) on CodePen.
?如下有兩個指令，分別是元素類型和屬性類型。
<my-directive><a href="http://google.com">Click me to go to Google</a></my-directive> <p my-directive=""><a href="http://google.com">Click me to go to Google</a></p>生成的html都是超鏈接。
參數restrict：個人理解指令的使用方式。可選值?EACM。分別代表?element，attribute，class和comment。
- E 元素方式 <my-directive></my-directive>
- A 屬性方式 <div my-directive="exp"> </div>
- C 類方式 <div class="my-directive: exp;"></div>
- M 注釋方式 <!-- directive: my-directive exp -->
參數template：要替換的內容。
參數templateUrl：從指定的url讀模版內容，如果內容很長或者需要復用就用這個參數吧。比如我們可以寫成
templateUrl : "../myTemplate.html" // 或者動態(tài)獲取 templateUrl: function(element, attrs) {return attrs.templateUrl || '../../uib/template/alert/alert.html'; },參數replace：是否使用模板內容替換掉整個節(jié)點， true 替換整個節(jié)點， false 替換節(jié)點內容。如例1，若replace為true。則生成的html結構如下：
<a href="http://google.com">Click me to go to Google</a> <a href="http://google.com" my-directive="">Click me to go to Google</a>參數link：
例2 link方法
See the Pen Directive/2 link by finley (@mafeifan) on CodePen.
參數scope：綁定策略
參數compile和?link。分別代表編譯和鏈接。
例3 綁定
如下TestCtrl里div元素有4個屬性。a,abc,xx,c
<body ng-app="myApp"><div ng-controller="TestCtrl"><div a abc="here" xx="{{ a }}" c="ccc"></div></div></body>JS
angular.module('myApp',[]) .controller('TestCtrl', function($scope){$scope.a = '123';$scope.here = 'here ~~'; }).directive('a', function(){var func = function(element, attrs, link){return function(scope){/** 輸出結果a: "here"b: "123"c: "ccc"d: "ccc"e: "here ~~*/console.log(scope);};};return {restrict: 'A',compile: func,? ? ?// a 找到屬性名為abc，其值為here
? ? ?// b 找到屬性名為xx，其值為{{a}} 接著找$scope.a 存在，其值為 123
? ? ?// c @attrName 沒有寫attrName, 默認取自己的值,等價于@c ,找到屬性c，其值為ccc
? ? ?// d 如上
? ? ?// e '=abc' 把屬性abc的值當作scope的屬性名。 這里存在屬性abc，其值為here。存在$scope.here。最終值為'here ~~'
? ? ?// 若改為abc={{ here }} 效果跟 b: '@xx'一樣
例4 transclude
See the Pen NG Directive學習4 transclude by finley (@mafeifan) on CodePen.
?
轉載于:https://www.cnblogs.com/mafeifan/p/5085623.html
總結
以上是生活随笔為你收集整理的AngularJS中Directive指令系列 - 基本用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 让博客园博客中的图片支持fancybox
- 下一篇： 前端开发自学之JavaScript——显