Angular.JS中的指令與參數(shù)詳解
指令,很重要!
AngularJS與jQuery最大的區(qū)別在哪里?我認為,表現(xiàn)在數(shù)據(jù)雙向綁定,實質(zhì)就是DOM的操作形式不一樣。
- JQuery通過選擇器找到DOM元素,再賦予元素的行為;
- 而AngularJS則是,將指令與DOM綁定在一起,再擴展指令的行為。
所以AngularJS開發(fā)最理想的結(jié)果就是,在頁面HTML與CSS的設(shè)計時,設(shè)計工程師只需要關(guān)注指令的使用;而在背后的邏輯開發(fā)上,架構(gòu)工程師則是不需要知道如何操作DOM,只需要關(guān)注指令背后的行為要如何實現(xiàn)就行;測試工程師也可以開發(fā)針對指令的單元測試。
指令就是DOM與邏輯行為的媒介,本質(zhì)就是DOM綁定的獨立邏輯行為函數(shù)。
指令難點在于參數(shù)
來看看都有哪些
angular.module('app', []) .directive('myDirective', 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 or function(scope, element, attrs, transclude, otherInjectables) { ... }, controllerAs: String, require: String, link: function(scope, iElement, iAttrs) { ... }, compile: // 返回一個對象或連接函數(shù),如下所示: function(tElement, tAttrs, transclude) { return { pre: function(scope, iElement, iAttrs, controller) { ... }, post: function(scope, iElement, iAttrs, controller) { ... } } return function postLink(...) { ... } } }; });
剛開始接觸指令的時候,我簡直就是蒙了,這堆參數(shù)究竟怎么用怎么理解啊。告訴大家我的一個理解方法。
把它們分成三類:
- 描述指令或DOM本身特性的內(nèi)部參數(shù)
- 連接指令外界、與其他指令或控制器溝通的對外參數(shù)
- 描述指令本身行為的行為參數(shù)
內(nèi)部參數(shù)
- restrict:String,E(元素)<my-directive></my-directive> A(屬性,默認值)<div my-directive="expression"></div> C(類名)<div class="my-directive:expression;"></div> M(注釋)<--directive:my-directive expression-->
- priority: Number,指令執(zhí)行優(yōu)先級
- template: String,指令鏈接DOM模板,例如“<h1>{{head}}</h1>”
- templateUrl:String,DOM模板路徑
- replace: Boolean,指令鏈接模板是否替換原有元素,
對外參數(shù)——scope
scope參數(shù)非常重要,本應(yīng)該是放到最后說明的,但是scope卻是理解其他參數(shù)的關(guān)鍵,所以務(wù)必先跟大家說清楚。
scope參數(shù)的作用是,隔離指令與所在控制器間的作用域、隔離指令與指令間的作用域。
scope參數(shù)是可選的,默認值為false,可選true、對象{};
- false:共享父域
- true:繼承父域,且新建獨立作用域
- 對象{}:不繼承父域,且新建獨立作用域
false、true、{}三者對比
來看個例子
<body> <div ng-controller='parentCtrl'> <h3>指令scope參數(shù)——false、true、{}對比測試</h3> parent: <div> <span> {{parentName}}</span> <input type="text" ng-model="parentName" /> </div> <br /> <child-a></child-a> <br /> <child-b></child-b> <br /> <child-c parent-name="parentName"></child-c> </div> <!--t1指令模板--> <script type="text/html" id="t1"> <div> <span>{{parentName}}</span> <input type="text" ng-model="parentName" /> </div> </script> <script> var app = angular.module("app", []); app.controller('parentCtrl', function ($scope) { $scope.parentName = "parent"; }) //false:共享作用域 app.directive('childA', function () { return { restrict: 'E', scope: false, template: function (elem, attr) { return "false:" + document.getElementById('t1').innerHTML; } }; }); //true:繼承父域,并建立獨立作用域 app.directive('childB', function () { return { restrict: 'E', scope: true, template: function (elem, attr) { return "true:" + document.getElementById('t1').innerHTML; }, controller: function ($scope) { $scope.parentName = "parent"; //已聲明的情況下,$scope.$watch監(jiān)聽的是自己的parentName $scope.$watch('parentName', function (n, o) { console.log("child watch" + n); }); //$scope.$parent.$watch監(jiān)聽的是父域的parentName $scope.$parent.$watch('parentName', function (n, o) { console.log("parent watch" + n); }); } }; }); //{}:不繼承父域,建立獨立作用域 app.directive('childC', function () { return { restrict: 'E', scope: {}, template: function (elem, attr) { return "{}:" + document.getElementById('t1').innerHTML; }, controller: function ($scope) { console.log($scope); } }; }); </script> </body>
false參數(shù)
本質(zhì):子域與父域共享作用域。
特點:父域修改parentName的同時,指令綁定的parentName的元素會被刷新。
反之,指令內(nèi)部parentName被修改時,父域的parentName同樣會被刷新。
true參數(shù)
本質(zhì):子域繼承父域,并建立獨立作用域。
特點:
1、在指令已聲明parentName的情況下,父域parentName變更,指令中parentName不會發(fā)生變化。
指令在true參數(shù)下,建立了的scope,獨立并隔離與父控制器的scope。
controller: function ($scope) { $scope.parentName = "parent"; }
反之,指令中parentName變更,父域也不會發(fā)生變化。
2、在指令未聲明parentName的情況下,父域的parentName變更,指令中parentName也會刷新
這種情況很多時候會被忽略,指令的scope沒有聲明對象時,其元素綁定的仍然是父域的對象。但,一旦指令中Input變更了,對應(yīng)的獨立scope也會自動聲明該綁定對象,這就回到了第1種情況。
controller: function ($scope) { //$scope.parentName = "parent"; }
然而,指令中parentName變更,父域是不會變化的;
3、在指令已聲明parentName的情況下 ,在指令中監(jiān)聽父域parentName 的變化無效。但監(jiān)聽子域parentName的變化有效
獨立子域scope,只能監(jiān)聽自己的,不能監(jiān)聽父域的。但通過 $scope.$parent可以監(jiān)聽父域。
controller: function ($scope) { $scope.parentName = "parent" ; //已聲明的情況下,$scope.$watch監(jiān)聽的是自己的parentName $scope.$watch( 'parentName' , function (n, o) { console.log("child watch" + n); }); //$scope.$parent.$watch監(jiān)聽的是父域的parentName $scope.$parent.$watch( 'parentName' , function (n, o) { console.log("parent watch" + n); }); }
4、在指令未聲明parentName的情況下 ,在指令中監(jiān)聽父域parentName的變化有效。
這里就不解釋了,參考第2點,大家可以動手試一下。
controller: function ($scope) { //$scope.parentName = "parent"; //未聲明的情況下,$scope.$watch監(jiān)聽的是父域的parentName $scope.$watch('parentName' , function (n, o) { console.log("child watch" + n); }); }
對象{}參數(shù)
本質(zhì):子域不繼承父域,并建立獨立作用域。
特點:
1、當scope對象為空對象時,無論是父域parentName,還是指令子域parentName發(fā)生變更,都不會影響到對方。
原理很清楚,就是指令建立的獨立作用域,與父域是完全隔離的。
scope: {}
2、當scope對象為非空對象時,指令會將該對象處理成子域scope的擴展屬性。而父域與子域之間傳遞數(shù)據(jù)的任務(wù),就是可以通過這塊擴展屬性完成。
<div ng-controller='parentCtrl'> parent: <p><span>{{name}}</span><input type="text" ng-model="name" /></p> <p><span>{{sexy}}</span><input type="text" ng-model="sexy" /></p> <p><span>{{age}}</span><input type="text" ng-model="age" /></p> <br /> <!--特別注意:@與=對應(yīng)的attr,@是單向綁定父域的機制,記得加上{{}};&對應(yīng)的attrName必須以on-開頭--> <child-c my-name="name" my-sexy-attr="sexy" my-age="{{age}}" on-say="say('i m ' + name)"></child-c> </div> <!--t1指令模板--> <script type="text/html" id="t1"> <div> <span>{{myName}}</span> <input type="text" ng-model="myName" /> </div> <div> <span>{{mySexy}}</span> <input type="text" ng-model="mySexy" /> </div> <div> <span>{{myAge}}</span> <input type="text" ng-model="myAge" /> </div> </script> <script> var app = angular.module("app", []); app.controller('parentCtrl', function ($scope) { $scope.name = "mark"; $scope.sexy = "male"; $scope.age = "30"; $scope.say = function (sth) { alert(sth); }; }) app.directive('childC', function () { return { restrict: 'E', scope: { myName: '=', mySexy: '=mySexyAttr', myAge: '@', onSay: '&' }, template: function (elem, attr) { return "{}:" + document.getElementById('t1').innerHTML; }, controller: function ($scope) { console.log($scope.myName); console.log($scope.mySexy); console.log($scope.myAge); $scope.onSay(); } }; }); </script>
@(or @Attr)綁定策略——本地作用域?qū)傩?,使用@符號將本地作用域同DOM屬性的值進行綁定。指令內(nèi)部作用域可以使用外部作用域的變量。(單向引用父域?qū)ο螅?/p>
<child-c my-age="{{age}}"></child-c>
ps:@ 是單向綁定本地作用域,記得加上{{}}
scope: { myAge: '@', }
= (or =Attr)綁定策略——雙向綁定:通過=可以將本地作用域上的屬性同父級作用域上的屬性進行雙向的數(shù)據(jù)綁定。就像普通的數(shù)據(jù)綁定一樣,本地屬性會反映出父數(shù)據(jù)模型中所發(fā)生的改變。(雙向引用父域?qū)ο螅?/p>
<child-c onSay="name"></child-c>
ps:=策略不需要加上{{}}進行綁定
scope: { myName: '=', }
& (or &Attr)綁定策略——通過&符號可以對父級作用域進行綁定,以便在其中運行函數(shù)。(調(diào)用父域函數(shù))
<child-c on-say="say('i m ' + name)"></child-c>
ps:&對應(yīng)的attrName必須以on-開頭
scope: { onSay: '&', }
父域綁定調(diào)用函數(shù)及傳參
app.controller('parentCtrl', function ($scope) { $scope.say = function (sth) { alert(sth); }; })
ps特別注意:@與=對應(yīng)的attr,;
<child-c my-name="name" my-sexy-attr="sexy" my-age="{{age}}" on-say="say('i m ' + name)"></child-c>
總結(jié)下來,scope擴展對象,既能夠解耦父域與子域共域的問題,也能夠?qū)崿F(xiàn)指令與外界通訊的問題,是Angular開發(fā)指令化模塊化的重要基礎(chǔ)。在往后的章節(jié),我會向大家介紹指令化開發(fā)的更多實例。
對外參數(shù)——require
scope是指令與外界作用域通訊的橋梁,而require是指令與指令之間通訊的橋梁。這個參數(shù)最大的作用在于,當要開發(fā)單指令無法完成,需要一些組合型指令的控件或功能,例如日期控件,通過require參數(shù),指令可以獲得外部其他指令的控制器,從而達到交換數(shù)據(jù)、事件分發(fā)的目的。
使用方法:require: String or Array
——String值為引入指令名稱,并且有兩個尋找指令策略符號‘?'與‘^';Array數(shù)組則為多個外部指令名稱。
在link函數(shù)第4個參數(shù)ctrl中獲取注入外部指令的控制器,如果require為String,ctrl為對象,如果require是數(shù)組,ctrl為數(shù)組。
require: '^teacher1', link: function ($scope, $element, $attrs, ctrl) { //ctrl指向teacher1指令的控制器 }
?策略——尋找指令名稱,如果沒有找到,link函數(shù)第4個參數(shù)為null;如果沒有?,則報錯。
^ 策略——在自身指令尋找指令名稱的同時,向上父元素尋找;如果沒有^,則僅在自身尋找。
如下例子,指令studentA向上可以找到指令teacher及自身,但是不能找到相鄰兄弟的student-b。
<div teacher> <student-a></student-a> <student-b></student-b> </div>
完整例子
<body> <div teacher> {{name}} <student-a></student-a> <student-b></student-b> </div> <script> var app = angular.module("app", []); //studentA——require指向父級指令teacher app.directive('studentA', function () { return { require: '?^teacher', scope: {}, template: '<div>A`s teacher name: <span>{{teacherName}}</span></div>', link: function ($scope, $element, $attrs, ctrl) { //獲取teacher指令控制器,并調(diào)用其方法sayName() $scope.teacherName = ctrl.sayName(); } }; }); //studentB——require指向父級指令teacher,及指令studentA //但是,由于不能獲得兄弟,也沒有采???策略,導(dǎo)致報錯 app.directive('studentB', function () { return { require: ['?^teacher', 'studentA'], scope: {}, template: '<div>B`s teacher name: <span>{{teacherName}}</span></div>', link: function ($scope, $element, $attrs, ctrl) { $scope.teacherName = ctrl.sayName(); } }; }); app.directive('teacher', function () { return { restrict: 'A', controller: function ($scope) { $scope.name = "Miss wang"; //擴展控制器的方法sayName,目的是讓外部內(nèi)獲取控制器內(nèi)部數(shù)據(jù) this.sayName = function () { return $scope.name; }; } }; }); </script> </body>
既然require可以獲取外部指令,那Angular原生指令應(yīng)該也是能夠獲取。其中最廣泛應(yīng)用的就是require: 'ngModel'
,關(guān)于ngModel在自定義指令上的應(yīng)用,留待下回實例中再跟大家深入討論。
行為參數(shù)——link與controller
為什么要把link與controller兩個參數(shù)放到一起?
因為很多童鞋會把它們錯誤地混淆使用,包括我自己。
link與controller都是描述指令行為的參數(shù),但它們是要描述的行為是完全不同的類型。
controller語法 controller:String or Function
controller本身的意義就是賦予指令控制器,而控制器就是定義其內(nèi)部作用域的行為的。
所以controller要描述的是:指令的作用域的行為。
//指向匿名控制器 controller: function ($scope) { }, //指向控制器mainCtrl controller: "mainCtrl"
link語法 link:String Or Function
link名稱是鏈接函數(shù),啥意思,好像挺難理解。所以在解釋鏈接函數(shù)之前,先要說一下Angular的初始化對于指令究竟做了什么。
Angular在剛從HTTP Response接收靜態(tài)素材之初,會首先去分析母頁HTML中有哪些原生指令或自定義指令,然后再去加載指令的template模板HTML,而template模板中又去加載自己的指令模板,如此類推,直到Angular找到了所有的指令及模板,形成模板樹,并返回模板函數(shù),提供給下一階段進行數(shù)據(jù)綁定。
<body> <stu1 ></ stu1> <script > var app = angular.module("app" , []); app.directive( 'stu1' , function () { return { restrict: 'E' , template: "<p>1</p><stu2></stu2>" , link: function (scope) { console.log( 'stu1 running' ); } }; }); app.directive( 'stu2' , function () { return { restrict: 'E' , template: "<p>2</p><stu3></stu3>" , link: function (scope) { console.log( 'stu2 running' ); } }; }); app.directive( 'stu3' , function () { return { restrict: 'E' , template: "<p>3</p>" , link: function (scope) { console.log( 'stu3 running' ); } }; }); </script > </ body> console output stu3 running stu2 running stu1 running
注意以上例子,在第一個斷點stu3 running的時候,1 2 3 三個模板都渲染完成了。然后從最根部的stu3的link函數(shù)開始,依次執(zhí)行stu 3 stu2 stu1的link函數(shù)。
簡單來說就是:
- 加載模板,形成DOM模板樹
- @@@@
- 數(shù)據(jù)綁定
@@@@是啥?沒錯,就是link鏈接函數(shù),它會在形成模板樹之后,在數(shù)據(jù)綁定之前,從最底部指令開始,逐個指令執(zhí)行它們的link函數(shù)。
在這個時間節(jié)點的link函數(shù),操作DOM的性能開銷是最低,非常適合在這個時機執(zhí)行DOM的操作,例如鼠標操作或觸控事件分發(fā)綁定、樣式Class設(shè)置、增刪改元素等等。
所以link就是描述指令元素操作行為。
link: function (scope, element, attr, ctrl) { element.bind("click", function () { console.log("綁定點擊事件"); }); element.append("<p>增加段落塊</p>"); //設(shè)置樣式 element.css("background-color", "yellow"); //不推薦,在link中賦予scope行為 scope.hello = function () { console.log("hello"); }; }
同理,在link中定義$scope行為是不推薦的。
這樣想想,對于controller與link,就明白了。但還有一個問題,它們倆的執(zhí)行順序是?答案是先controller,后link。
放到全局順序就是:
- 執(zhí)行controller,設(shè)置各個作用域scope
- 加載模板,形成DOM模板樹
- 執(zhí)行l(wèi)ink,設(shè)置DOM各個行為
- 數(shù)據(jù)綁定,最后scope綁上DOM
例子
<div student> {{name }} </div> <script> var app = angular.module("app", []); app.directive('student', function () { return { restrict: 'A', controller: function ($scope) { $scope.name = "tgor"; console.log('controller running'); }, link: function (scope, el) { el.append("<p>hello</p>"); console.log('link running'); } }; }); </script>
總結(jié)
以上就是這篇文章的全部內(nèi)容了,,還有compile、controllerAs……沒有講。寫得累死,希望能給大家一些幫助,同時也可以將自己的錯誤暴露出來,望大家指正。之后會跟大家分享一下指令在實戰(zhàn)中的一些實例。請大家繼續(xù)關(guān)注腳本之家。
相關(guān)文章
Android 實現(xiàn)兩個Activity跳轉(zhuǎn)實例
本文主要介紹Android 多個Activity相互之間的跳轉(zhuǎn),認識Activity生命周期,在做Android編程的時候用處很大,希望能幫助有需要的小伙伴2016-07-07Android碎片fragment實現(xiàn)靜態(tài)加載的實例代碼
這篇文章主要介紹了Android碎片fragment實現(xiàn)靜態(tài)加載的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11Android點擊WebView實現(xiàn)圖片縮放及滑動瀏覽效果
這篇文章主要為大家詳細介紹了Android點擊WebView實現(xiàn)圖片縮放及滑動瀏覽效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12Android使用AudioManager修改系統(tǒng)音量的方法
這篇文章主要介紹了Android使用AudioManager修改系統(tǒng)音量的方法,結(jié)合實例形式分析了AudioManager調(diào)節(jié)音量的常用方法及相關(guān)使用技巧,需要的朋友可以參考下2016-08-08android使用RxJava實現(xiàn)預(yù)加載
這篇文章主要為大家詳細介紹了android使用RxJava實現(xiàn)預(yù)加載的相關(guān)資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01