angularjs指令的學習
指令是angluarjs的一個標誌,是有別於其他框架的重要特徵,因此學習angularjs,指令是必須認真而系統的學習的。
指令概述
指令是一種執行訊號,釋出了一個指令就要某種行為,在html中各種標籤可以理解為指令,例如a標籤,就是告訴瀏覽器要建立一個超連結。
就是一個指令的基本格式,指令使用時只需把指令的標籤放在相應的位置就行
由於本團隊使用了yeoman建立專案,因此建立指令可以使用yeoman的命令:
yo angular:directive <name>
yoeman還有許多便捷的命令,這裡不再細說
restrict
restrict屬性指出的是指令在html中的使用方法,一共有"E","A","M","C"四種,對應標籤(element),屬性(attribute),類(class),註釋(comment);可以多個同時使用,比如EAC,表示支援多種方式的使用
replace
這是指令的另一個屬性,暫時沒想到他應該在何種情況下使用,但是書上既然專門介紹了還是寫一寫,加深一下印象。
當設定replace為true時,模板中的內容替換指令為標記,這是書上的說法,我覺得說的不太明白,看圖一下就懂了。
transclude
將檢視模板(Template或TemplateUrl)替換到指定位置的檢視(Restrict),transclude與replace有一些相似之處,因此拿他們對比一下
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>My AngularJS App</title> <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script> <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script> </head> <body> <hello> <br/> <span>原始的內容,</span><br/> <span>還會在這裡。</span> </hello> <br> <hello1> <br/> <span>原始的內容1,</span><br/> <span>還會在這裡1。</span> </hello1> <br> <script> var appModule = angular.module('app', []); appModule .directive('hello', function () { return { restrict: 'E', template: '<div>Hi there :transclude: true' + '<span ng-transclude></span></div>,', transclude: true /*把<hello>標籤替換成我們所編寫的HTML模板, 但是<hello>標籤內部的內容保持不變。*/ }; }) .directive('hello1', function () { return { restrict: 'E', template: '<div>Hi there 1 :transclude: false' + '<span ng-transclude></span></div>', transclude: false }; }) </script> </body> </html>
簡單明瞭。
link
link就是一個函式
scope引數表示作用域,element表示指令中的元素,可以通過內建的jqLite呼叫,jqLite是一個壓縮版的jQuery,attrs引數表示指令元素的屬性集合,通過這個可以獲取元素中的各種屬性。
compaile
沒搞太懂,又因為不常用就不細說了。
scope
scope是指令中一個很強大也很常用的屬性scope屬性包含兩種型別,一種是布林值,另一種是json物件。
scope是布林值
scope屬性自定義指令時預設值就是布林型別的,初始值為false,指令中的作用域就是指令元素所在的作用域兩者是相同的。如果scope為true,則表示獨立建立,,當他的內容發生變化時並不會修改父作用域的內容。
scope是物件
如果scope是物件,那麼父作用域與子作用域是完全獨立的,不存在任何關聯。如果要用父作用域的屬性和方法需要在scope屬性對應的json物件中新增繫結策略:@ :把當前屬性作為字串傳遞,你還可以繫結來自外層scope的值,在屬性值中插入雙括號即可,此方法是單項繫結;
= :與父scope中的屬性進行雙向繫結
& :傳遞來自父scope的函式,稍後再呼叫.
requeire和controller
當一個指令需要和父元素指令進行通訊的時候,它們就會用到這兩個屬性。關於這個,看到一篇講解很好的文章:https://my.oschina.net/u/2342...