標籤：繼承 返回 暫停 自己 `` 上下文 選擇性參數 ext gif
指令定義angular.module(‘freefedApp‘,[]).directive(name,function(){ return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function:function(tElement, tAttrs) (...}, templateUrl: String, replace: Boolean or String, scope: Boolean or Object, transclude: Boolean, controller: String orfunction(scope, element, attrs, transclude, otherInjectables) { ... }, controllerAs: String, require: String, link: function(scope, iElement, iAttrs) { ... }, };});
指令範圍
DOM中每個指令調用時都可能會:
範圍scope設定(參數是可選的,預設值是false):
對於指令隔離範圍angularJS提供了幾種方法能夠將指令內部的隔離範圍,同指令外部的範圍進行資料繫結
demo.html<!doctype html><html ng-app="freefedApp"> <head> <title>angular應用demo</title> <script src="angular.js"></script> <script src="app.js"></script> </head> <body> <div ng-controller="freefedCtrl"> 發送郵件地址 : <input type="text" ng-model="from" /> 內送郵件地址 : <input type="text" ng-model="to" /> <div email-directive from-email="{{from}}" to-email="to" on-send="sendMail(email)"> </div> </div> </body></html>
app.js/*聲明module*/var module = angular.module(‘freefedApp‘,[]);/*聲明控制器*/module.controller(‘freefedCtrl‘,[‘$scope‘,function($scope){ $scope.from = ‘[email protected]‘; $scope.sendMail = function(email){ alert(‘我將發送郵件到‘ + email); };}]);/*聲明指令*/module.directive(‘emailDirective‘,function(){ return { scope : { fromEmail : ‘@‘ //值綁定 toEmail : ‘=‘ //和父級範圍屬性進行雙向繫結 onSend : ‘&‘ //與父級範圍進行綁定 }, link : function( scope,el,attr ){ scope.onSend( { email : scope. toEmail} ); //調用與onSend綁定的父級範圍的sendMail函數，並傳遞參數email的值給它 } };});指令參數詳解
restrict是一個可選的參數。它告訴angularJS這個指令在DOM中可以何種形式被聲明。預設angularJS認為restrict的值是A,即以屬性的形式來進行聲明;可選值如下:E(元素)A(屬性,預設值)
C(類名)
M(注釋)
優先順序參數可以被設定為一個數值。大多數指令會忽略這個參數,使用預設值0,但也有些 情境設定高優先順序是非常重要甚至是必須的。例如,ngRepeat將這個參數設定為1000,這樣就可 10 以保證在同一元素上,它總是在其他指令之前被調用
terminal: Boolean,
這個參數用來告訴angularJS停止運行當前元素上比本指令優先順序低的指令。但同當前指令 優先順序相同的指令還是會被執行。?如果元素上某個指令設定了terminal參數並具有較高的優先順序,就不要再用其他低優先順序的 指令對其進行修飾了,因為不會被調用。但是具有相同優先順序的指令還是會被繼續調用。使用了terminal參數的例子是ngView和ngIf。ngIf的優先順序略高於ngView,如果ngIf的表 達式值為true,ngView就可以被正常執行,但如果ngIf運算式的值為false,由於ngView的優先 級較低就不會被執行template: String or Template Function:function(tElement, tAttrs) (...},
template參數是可選的,必須被設定為以下兩種形式之一:一段HTML文本;一個可以接受兩個參數的函數,參數為tElement和tAttrs,並返回一個代表模板的字串。tElement和tAttrs中的t代表template,是相對於instance的。在討論連結和編譯 設定時會詳細介紹,模板元素或屬性與執行個體元素或屬性之間的區別。angularJS會同處理HTML一樣處理模板字串。模板中可以通過大括弧標記來訪問範圍, 例如{{ expression }}。如果模板字串中含有多個DOM元素,或者只由一個單獨的文本節點構成,那它必須被包 含在一個父元素內。換句話說,必須存在一個根DOM元素: template: ‘ <div> <-- single root element --> <a href="http://google.com">Click me</a> <h1>When using two elements, wrap them in a parent element</h1> </div>另外,注意每一行末尾的反斜線,這樣angularJS才能正確解析多行字串。在實際生產中, 更好的選擇是使用templateUrl參數引用外部模板templateUrl: String,
templateUrl是可選的參數,可以是以下類型:一個代表外部HTML檔案路徑的字串;一個可以接受兩個參數的函數,參數為tElement和tAttrs,並返回一個外部HTML檔案路徑的字串,預設情況下,調用指令時會在後台通過Ajax來請求HTML模板檔案模板載入是非同步,意味著編譯和連結要暫停,等待模板載入完成。通過Ajax非同步載入大量的模板將嚴重拖慢一個用戶端應用的速度。為了避免延遲,可以在部 署應用之前對HTML模板進行緩衝。在大多數情境下緩衝都是一個非常好的選擇,因為angularJS 通過減少請求數量提升了效能。模板載入後,angularJS會將它預設緩衝到$templateCache服務中。在實際生產中,可以提前將模板緩衝到一個定義模板的JavaScript檔案中,這樣就不需要通過XHR來載入模板了replace: Boolean or String,
replace是一個選擇性參數,如果設定了這個參數,值必須為true,因為預設值為false。預設值意味著模板會被當作子項目插入到調用此指令的元素內部: <div some-directive></div> .directive(‘someDirective‘, function() { return { template: ‘<div>some stuff here<div>‘ }; });調用指令之後的結果如下(這是預設replace為false時的情況): <div some-directive> <div>some stuff here<div> </div> 如果replace被設定為了true: .directive(‘someDirective‘, function() { return { replace: true // 修飾過?????? template: ‘<div>some stuff here<div>‘ }; ?});指令調用後的結果將是: <div>some stuff here<div>scope: Boolean or Object,
看上面指令範圍transclude: Boolean,
controller: String orfunction(scope, element, attrs, transclude, otherInjectables) { ... },
controller參數可以是一個字串或一個函數。當設定為字串時,會以字串的值為名字, 來尋找註冊在應用中的控制器的建構函式</pre>* controllerAs: String,<pre>controllerAs參數用來設定控制器的別名,可以以此為名來發布控制器,我們可以在路由和指令中建立匿名控制器的強大 能力。這種能力可以將動態對象建立成為控制器,並且這個對象是隔離的、易於測試的```link: function(scope, iElement, iAttrs) { ... },
用link函數建立可以操作DOM的指令angularJS中如何寫自訂指令
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
