溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
帶你走近AngularJS系列：
帶你走近AngularJS - 基本功能介紹
帶你走近AngularJS - 體驗(yàn)指令實(shí)例
帶你走近AngularJS - 創(chuàng)建自定義指令
------------------------------------------------------------------------------------------------
為什么使用AngularJS 指令？
使用過(guò) AngularJS 的朋友應(yīng)該最感興趣的是它的指令?，F(xiàn)今市場(chǎng)上的前端框架也只有AngularJS 擁有自定義指令的功能，并且AngularJS 是目前唯一提供Web應(yīng)用可復(fù)用能力的框架。
目前有很多JavaScript 產(chǎn)品提供插件給Web開(kāi)發(fā)人員。例如， Bootstrap 就是當(dāng)前比較流行的提供樣式和JavaScript插件的前端開(kāi)發(fā)工具包。但是開(kāi)發(fā)人員在使用Booostrap中的插件時(shí)， 必須切換到JavaScript 模式來(lái)寫(xiě) jQuery 代碼來(lái)激活插件雖然 jQuery 代碼寫(xiě)起來(lái)十分簡(jiǎn)單，但是必須和HTML進(jìn)行同步，這是一個(gè)單調(diào)乏味且容易出錯(cuò)的過(guò)程。
AngularJS主頁(yè)展示了一個(gè)簡(jiǎn)單的例子，用于實(shí)現(xiàn)Bootstrap中的 Tab功能，可以在頁(yè)面中輕松添加 Tab 功能，并且使用方法和 ul 標(biāo)簽一樣簡(jiǎn)單。HTML代碼如下：
<body ng-app="components"> <h4>BootStrap Tab Component</h4> <tabs> <pane title="First Tab"> <div>This is the content of the first tab.</div> </pane> <pane title="Second Tab"> <div>This is the content of the second tab.</div> </pane> </tabs> </body>
JavaScript代碼如下：
angular.module('components', []).
directive('tabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: [ "$scope", function($scope) {
var panes = $scope.panes = [];
$scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}
this.addPane = function(pane) {
if (panes.length == 0) $scope.select(pane);
panes.push(pane);
}
}],
template:
'<div class="tabbable">' +
'<ul class="nav nav-tabs">' +
'<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
'<a href="" ng-click="select(pane)">`pane`.`title`</a>' +
'</li>' +
'</ul>' +
'<div class="tab-content" ng-transclude></div>' +
'</div>',
replace: true
};
}).
directive('pane', function() {
return {
require: '^tabs',
restrict: 'E',
transclude: true,
scope: { title: '@' },
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
template:
'<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
'</div>',
replace: true
};
})
正如你所見(jiàn)，除了擁有用于實(shí)現(xiàn)指令的 <tabs> 和<pane> 標(biāo)簽，頁(yè)面和常規(guī)HTML頁(yè)面沒(méi)有什么區(qū)別。HTML開(kāi)發(fā)人員無(wú)需編寫(xiě)任何代碼。當(dāng)然，總需要有第一個(gè)吃螃蟹的人，創(chuàng)建指令共享使用，但是目前Tabs指令已經(jīng)很常見(jiàn)了，可以在任何地方復(fù)用（如BootStrap,、jQueryUI、Wijmo, 和一些知名的前端插件集）。
由于指令的易用和易編寫(xiě)，許多用戶(hù)已經(jīng)開(kāi)始使用AngularJS編寫(xiě)指令了。例如， AngularJS 開(kāi)發(fā)組已經(jīng)基于AngularJS實(shí)現(xiàn)了一系列指令-UI Bootstrap 來(lái)代替Bootstrap； 知名ComponentOne 控件廠商也在AngularJS 基礎(chǔ)上創(chuàng)建了Wijmo ；我們也可以在GitHub上找到一些公共指令資料庫(kù)：jQueryUI widgets。
擁有了 AngularJS，是不是覺(jué)得自己已經(jīng)站在了巨人的肩膀上了？但是不要高興的太早，如果已經(jīng)有了這么多的指令供我們使用，那我們?yōu)槭裁催€要學(xué)習(xí)AngularJS ，為什么還要學(xué)習(xí)自定義指令呢？
舉個(gè)簡(jiǎn)單的例子，也許你有特殊的需求：假設(shè)你在一家財(cái)務(wù)公司工作，你需要?jiǎng)?chuàng)建一張財(cái)務(wù)表單，它需要以表格的形式展示數(shù)據(jù)、擁有綁定、編輯、校驗(yàn)并且同步數(shù)據(jù)更新到服務(wù)器的功能。表單插件很常見(jiàn)但是能夠滿(mǎn)足這些具體需求的不得而知了，所以你必須根據(jù)實(shí)際業(yè)務(wù)需求來(lái)創(chuàng)建自定義指令。
<body ng-app="abcFinance"> <h4>Offshore Investment Summary</h4> <abc-investment-form customer="currentCustomer" country="currentCountry"> </abc-investment-form data> </body>
這就是本篇文章的目的，接下來(lái)我們會(huì)討論如何創(chuàng)建 AngularJS指令。
文章開(kāi)頭的自定義指令十分的簡(jiǎn)單。它僅僅實(shí)現(xiàn)了同步的功能。一般指令是包含更多元素的：
//創(chuàng)建指令模塊 (或者檢索現(xiàn)有模塊)
var m = angular.module("myApp");
// 創(chuàng)建"my-dir"指令
myApp.directive("myDir", function() {
return {
restrict: "E", // 指令是一個(gè)元素 (并非屬性)
scope: { // 設(shè)置指令對(duì)于的scope
name: "@", // name 值傳遞 （字符串，單向綁定）
amount: "=", // amount 引用傳遞（雙向綁定）
save: "&" // 保存操作
},
template: // 替換HTML (使用scope中的變量)
"<div>" +
" `name`: <input ng-model='amount' />" +
" <button ng-click='save()'>Save</button>" +
"</div>",
replace: true, // 使用模板替換原始標(biāo)記
transclude: false, // 不復(fù)制原始HTML內(nèi)容
controller: [ "$scope", function ($scope) { … }],
link: function (scope, element, attrs, controller) {…}
}
});效果如下：
注意這個(gè)自定義指令遵循一種格式：以"my" 為前綴，類(lèi)似于命名空間，因此如果你在應(yīng)用中引用了多個(gè)模塊指令，你可以通過(guò)前綴很容易的判斷出它是在哪定義的。這不是硬性要求，但是這樣做可以帶來(lái)很多便利。
指令的構(gòu)造函數(shù)會(huì)返回帶有屬性的JavaScript 對(duì)象。這些內(nèi)容在AngularJS 主頁(yè)中都有清晰說(shuō)明。以下是我對(duì)一些屬性的理解：
restrict: 說(shuō)明指令在HTML中的應(yīng)用形式，備選項(xiàng)有"A"、"E" 和 "C"， "M" ，分別代表 attribute、element、class和comment（默認(rèn)值為"A"）。我們將更多的關(guān)注attributes-如何創(chuàng)建UI元素。
scope: 創(chuàng)建指令的作用范圍，scope在指令中作為屬性標(biāo)簽傳遞。Scope 是創(chuàng)建可以復(fù)用指令的必要條件，每個(gè)指令（不論是處于嵌套指令的哪一級(jí)）都有其唯一的作用域，它不依賴(lài)于父scope。scope 對(duì)象定義names 和types 變量。上面的例子即創(chuàng)建了3個(gè)scope變量。
name: "@" （值傳遞，單向綁定）： "@"符號(hào)表示變量是值傳遞。指令會(huì)檢索從父級(jí)scope中傳遞而來(lái)字符串中的值。指令可以使用該值但無(wú)法修改，是最常用的變量。
amount: "=" （引用,雙向綁定）: "="符號(hào)表示變量是引用傳遞。指令檢索主Scope中的引用取值。值可以是任意類(lèi)型的，包括復(fù)合對(duì)象和數(shù)組。指令可以更改父級(jí)Scope中的值，所以當(dāng)指令需要修改父級(jí)Scope中的值時(shí)我們就需要使用這種類(lèi)型。
save: "&" (表達(dá)式) : “&”符號(hào)表示變量是在父級(jí)Scope中啟作用的表達(dá)式。它允許指令實(shí)現(xiàn)比修改值更高級(jí)的操作。
template: 替代原始模板中的標(biāo)記的字符串。替換功能將替換所有舊元素為新值。注意template是如何使用Scope中定義的變量的。這允許你無(wú)需寫(xiě)任何額外的代碼即可創(chuàng)建macro-style 風(fēng)格指令。replace: 說(shuō)明是否替換原始標(biāo)記中的值或是追加原始標(biāo)記中的值。默認(rèn)值是false，這時(shí)原始標(biāo)記將被保留。
transclude: 說(shuō)明自定義指令是否復(fù)制原始標(biāo)記中的內(nèi)容。例如，之前展示的“tab”指令設(shè)置了transclude 為 true，因?yàn)閠ab 元素包含其他HTML 元素。 "dateInput" 指令則需要在初始化時(shí)為空，所以需要設(shè)置transclude 為false。
link: 該方法在指令中扮演著重要的角色。它負(fù)責(zé)執(zhí)行DOM 操作和注冊(cè)事件監(jiān)聽(tīng)器等。link 方法包含以下參數(shù)：
scope: 指令Scope的引用。scope 變量在初始化時(shí)是不被定義的，link 方法會(huì)注冊(cè)監(jiān)視器監(jiān)視值變化事件。
element: 包含指令的DOM元素的引用， link 方法一般通過(guò)jQuery 操作實(shí)例（如果沒(méi)有加載jQuery，還可以使用Angular's jqLite ）。
controller: 在有嵌套指令的情況下使用。這個(gè)參數(shù)作用在于把子指令的引用提供給父指令，允許指令之間進(jìn)行交互， tab 指令就是使用該參數(shù)較典型的例子：http://jsfiddle.net/powertoolsteam/GBE7N/1/
注意，當(dāng)調(diào)用link 方法時(shí)， 通過(guò)值傳遞（"@"）的scope 變量將不會(huì)被初始化，它們將會(huì)在指令的生命周期中另一個(gè)時(shí)間點(diǎn)進(jìn)行初始化，如果你需要監(jiān)聽(tīng)這個(gè)事件，可以使用scope.$watch 方法。
好了，以上即為自定義指令需要用到基本知識(shí)描述。如果你仍然不熟悉指令，最好的方法就是動(dòng)手實(shí)現(xiàn)幾個(gè)小例子，可以在fiddle中進(jìn)行實(shí)踐：http://jsfiddle.net/powertoolsteam/Tk92U/
在下一篇文章中我們將一起熟悉幾個(gè)AngularJS自定義指令。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼