AngularJS 指令實踐
指令(Directives)是所有AngularJS應用最重要的部分。儘管AngularJS已經提供了非常豐富的指令,但還是經常需要建立應用特定的指令。這篇教程會為你講述如何自定義指令,以及介紹如何在實際專案中使用。在這篇文章的最後,我會指導你如何使用Angular指令來建立一個簡單的記事本應用。
概述
一個指令用來引入新的HTML語法。指令是DOM元素上的標記,使元素擁有特定的行為。舉例來說,靜態的HTML不知道如何來建立和展現一個日期選擇器控制元件。讓HTML能識別這個語法,我們需要使用指令。指令通過某種方法來建立一個能夠支援日期選擇的元素。我們會循序漸進地介紹這是如何實現的。 如果你寫過AngularJS的應用,那麼你一定已經使用過指令,不管你有沒有意識到。你肯定已經用過簡單的指令,比如 ng-mode, ng-repeat, ng-show等。這些指令都賦予DOM元素特定的行為。例如,ng-repeat 重複特定的元素,ng-show 有條件地顯示一個元素。如果你想讓一個元素支援拖拽,你也需要建立一個指令來實現它。指令背後基本的想法很簡單。它通過對元素繫結事件監聽或者改變DOM而使HTML擁有真實的互動性。
jQuery視角
想象一下使用jQuery如何建立一個日期選擇器。首先,我們在HTML中新增一個普通的輸入框,然後通過jQuery呼叫 $(element).dataPicker() 來將它轉變成一個日期選擇器。但是,仔細想一下。當一個設計人員過來檢查HTML標記的時候,他/她能否立刻猜到這個欄位實際上表示的內容?這只是一個簡單的輸入框,或者一個日期選擇器?你需要檢視jQuery程式碼來確定這些。而Angular的方法是使用一個指令來擴充套件HTML。所以,一個日期選擇器的指令可以是下面的形式:
XHTML
<input type="text" />
建立自定義指令:這種建立UI組建的方式更加直接和清晰。你可以輕易地通過檢視元素就明白這到底是什麼。
一個Angular指令可以有以下的四種表現形式:
1. 一個新的HTML元素(<data-picker></data-picker>)
2. 元素的屬性(<input type=”text” data-picker/>)
3. CSS class(<input type=”text” class=”data-picker”/>)
4. 註釋(<!–directive:data-picker –>)
當然,我們可以控制我們的指令在HTML中的表現形式。下面我們來看一下AngularJS中的一個典型的指令的寫法。指令註冊的方式與 controller 一樣,但是它返回的是一個擁有指令配置屬性的簡單物件(指令定義物件) 。下面的程式碼是一個簡單的 Hello World 指令。
JavaScript
var app = angular.module('myapp', []); app.directive('helloWorld', function() { return { restrict: 'AE', replace: 'true', template: '<h3>Hello World!!</h3>' }; });
在上面的程式碼中,app.directive()方法在模組中註冊了一個新的指令。這個方法的第一個引數是這個指令的名字。第二個引數是一個返回指令定義物件的函式。如果你的指令依賴於其他的物件或者服務,比如 $rootScope, $http, 或者$compile,他們可以在這個時間被注入。這個指令在HTML中以一個元素使用,如下:
XHTML
<hello-world/> //OR <hello:world/>
XHTML或者,以一個屬性的方式使用:
<div hello-world></div> //OR <div hello:world/>
如果你想要符合HTML5的規範,你可以在元素前面新增 x- 或者 data-的字首。所以下面的標記也會匹配 helloWorld 指令:
<div data-hello-world></div> //OR <div x-hello-world></div>
restrict – 這個屬性用來指定指令在HTML中如何使用(還記得之前說的,指令的四種表示方式嗎)。在上面的例子中,我們使用了 ‘AE’。所以這個指令可以被當作新的HTML元素或者屬性來使用。如果要允許指令被當作class來使用,我們將 restrict 設定成 ‘AEC’。
注意: 在匹配指令的時候,Angular會在元素或者屬性的名字中剔除 x- 或者 data- 字首。 然後將 – 或者 : 連線的字串轉換成駝峰(camelCase)表現形式,然後再與註冊過的指令進行匹配。這是為什麼,我們在HTML中以 hello-world 的方式使用 helloWorld 指令。其實,這跟HTML對標籤和屬性不區分大小寫有關。 儘管上面的指令僅僅實現了靜態文字的顯示,但是這裡還是有一些有趣的點值得我們去挖掘。我們在指令定義過程中使用了三個屬性來配置指令。我們來一一介紹他們的作用。
- template – 這個屬性規定了指令被Angular編譯和連結(link)後生成的HTML標記。這個屬性值不一定要是簡單的字串。template 可以非常複雜,而且經常包含其他的指令,以及表示式({{ }})等。更多的情況下你可能會見到 templateUrl, 而不是 template。所以,理想情況下,你應該將模板放到一個特定的HTML檔案中,然後將 templateUrl 屬性指向它。
- replace – 這個屬性指明生成的HTML內容是否會替換掉定義此指令的HTML元素。在我們的例子中,我們用 <hello-world></hello-world>的方式使用我們的指令,並且將 replace 設定成 true。所以,在指令被編譯之後,生成的模板內容替換掉了 <hello-world></hello-world>。最終的輸出是 <h3>Hello World!!</h3>。如果你將 replace 設定成 false,也就是預設值,那麼生成的模板會被插入到定義指令的元素中。
開啟這個 plunker,在”Hello World!!”右鍵檢查元素內容,來更形象地明白這些。
Link函式和Scope
指令生成出的模板其實沒有太多意義,除非它在特定的scope下編譯。預設情況下,指令並不會建立新的子scope。更多的,它使用父scope。也就是說,如果指令存在於一個controller下,它就會使用這個controller的scope。 如何運用scope,我們要用到一個叫做 link 的函式。它由指令定義物件中的link屬性配置。讓我們來改變一下我們的 helloWorld 指令,當使用者在一個輸入框中輸入一種顏色的名稱時,Hello World 文字的背景色自動發生變化。同時,當使用者在 Hello World 文字上點選時,背景色變回白色。 相應的HTML標記如下:
XHTML
<body ng-controller="MainCtrl"> <input type="text" ng-model="color" placeholder="Enter a color" /> <hello-world/> </body>
JavaScript修改後的 helloWorld 指令如下:
app.directive('helloWorld', function() { return { restrict: 'AE', replace: true, template: '<p style="background-color:{{color}}">Hello World', link: function(scope, elem, attrs) { elem.bind('click', function() { elem.css('background-color', 'white'); scope.$apply(function() { scope.color = "white"; }); }); elem.bind('mouseover', function() { elem.css('cursor', 'pointer'); }); } }; });
scope – 指令的scope。在我們的例子中,指令的scope就是父controller的scope。我們注意到指令定義中的 link 函式。 它有三個引數:
- elem – 指令的jQLite(jQuery的子集)包裝DOM元素。如果你在引入AngularJS之前引入了jQuery,那麼這個元素就是jQuery元素,而不是jQLite元素。由於這個元素已經被jQuery/jQLite包裝了,所以我們就在進行DOM操作的時候就不需要再使用 $()來進行包裝。
- attr – 一個包含了指令所在元素的屬性的標準化的引數物件。舉個例子,你給一個HTML元素新增了一些屬性:,那麼可以在 link 函式中通過 attrs.someAttribute 來使用它。
link函式主要用來為DOM元素新增事件監聽、監視模型屬性變化、以及更新DOM。在上面的指令程式碼片段中,我們新增了兩個事件, click,和 mouseover。click 處理函式用來重置 <p> 的背景色,而 mouseover 處理函式改變滑鼠為 pointer。在模板中有一個表示式 {{color}},當父scope中的 color 發生變化時,它用來改變 Hello World 文字的背景色。 這個 plunker 演示了這些概念。
compile函式
compile 函式在 link 函式被執行之前用來做一些DOM改造。它接收下面的引數:
- tElement – 指令所在的元素
- attrs – 元素上賦予的引數的標準化列表
要注意的是 compile 函式不能訪問 scope,並且必須返回一個 link 函式。但是如果沒有設定 compile 函式,你可以正常地配置 link 函式,(有了compile,就不能用link,link函式由compile返回)。compile函式可以寫成如下的形式:
JavaScript
app.directive('test', function() { return { compile: function(tElem,attrs) { //do optional DOM transformation here return function(scope,elem,attrs) { //linking function here }; } }; });
指令是如何被編譯的大多數的情況下,你只需要使用 link 函式。這是因為大部分的指令只需要考慮註冊事件監聽、監視模型、以及更新DOM等,這些都可以在 link 函式中完成。 但是對於像 ng-repeat 之類的指令,需要克隆和重複 DOM 元素多次,在 link 函式執行之前由 compile 函式來完成。這就帶來了一個問題,為什麼我們需要兩個分開的函式來完成生成過程,為什麼不能只使用一個?要回答好這個問題,我們需要理解指令在Angular中是如何被編譯的!
當應用引導啟動的時候,Angular開始使用 $compile 服務遍歷DOM元素。這個服務基於註冊過的指令在標記文字中搜尋指令。一旦所有的指令都被識別後,Angular執行他們的 compile 方法。如前面所講的,compile 方法返回一個 link 函式,被新增到稍後執行的 link 函式列表中。這被稱為編譯階段。如果一個指令需要被克隆很多次(比如 ng-repeat),compile函式只在編譯階段被執行一次,複製這些模板,但是link 函式會針對每個被複制的例項被執行。所以分開處理,讓我們在效能上有一定的提高。這也說明了為什麼在 compile 函式中不能訪問到scope物件。 在編譯階段之後,就開始了連結(linking)階段。在這個階段,所有收集的 link 函式將被一一執行。指令創造出來的模板會在正確的scope下被解析和處理,然後返回具有事件響應的真實的DOM節點。
改變指令的Scope
預設情況下,指令獲取它父節點的controller的scope。但這並不適用於所有情況。如果將父controller的scope暴露給指令,那麼他們可以隨意地修改 scope 的屬性。在某些情況下,你的指令希望能夠新增一些僅限內部使用的屬性和方法。如果我們在父的scope中新增,會汙染父scope。 其實我們還有兩種選擇:
- 一個子scope – 這個scope原型繼承子父scope。
- 一個隔離的scope – 一個孤立存在不繼承自父scope的scope。
這樣的scope可以通過指令定義物件中 scope 屬性來配置。下面的程式碼片段是一個例子:
JavaScript
app.directive('helloWorld', function() { return { scope: true, // use a child scope that inherits from parent restrict: 'AE', replace: 'true', template: '<h3>Hello World!!</h3>' }; });
JavaScript上面的程式碼,讓Angular給指令建立一個繼承自父socpe的新的子scope。 另外一個選擇,隔離的scope:
app.directive('helloWorld', function() { return { scope: {}, // use a new isolated scope restrict: 'AE', replace: 'true', template: '<h3>Hello World!!</h3>' }; });
這個指令使用了一個隔離的scope。隔離的scope在我們想要建立可重用的指令的時候是非常有好處的。通過使用隔離的scope,我們能夠保證我們的指令是自包含的,可以被很容易的插入到HTML應用中。 它內部不能訪問父的scope,所保證了父scope不被汙染。 在我們的 helloWorld 指令例子中,如果我們將 scope 設定成 {},那麼上面的程式碼將不會工作。 它會建立一個新的隔離的scope,那麼相應的表示式 {{color}} 會指向到這個新的scope中,它的值將是 undefined. 使用隔離的scope並不意味著我們完全不能訪問父scope的屬性。
隔離scope和父scope之間的資料繫結
通常,隔離指令的scope會帶來很多的便利,尤其是在你要操作多個scope模型的時候。但有時為了使程式碼能夠正確工作,你也需要從指令內部訪問父scope的屬性。好訊息是Angular給了你足夠的靈活性讓你能夠有選擇性的通過繫結的方式傳入父scope的屬性。讓我們重溫一下我們的 helloWorld 指令,它的背景色會隨著使用者在輸入框中輸入的顏色名稱而變化。還記得當我們對這個指令使用隔離scope的之後,它不能工作了嗎?現在,我們來讓它恢復正常。
假設我們已經初始化完成app這個變數所指向的Angular模組。那麼我們的 helloWorld 指令如下面程式碼所示:
JavaScript
app.directive('helloWorld', function() { return { scope: {}, restrict: 'AE', replace: true, template: '<p style="background-color:{{color}}">Hello World</p>', link: function(scope, elem, attrs) { elem.bind('click', function() { elem.css('background-color','white'); scope.$apply(function() { scope.color = "white"; }); }); elem.bind('mouseover', function() { elem.css('cursor', 'pointer'); }); } }; });
XHTML使用這個指令的HTML標籤如下:
<body ng-controller="MainCtrl"> <input type="text" ng-model="color" placeholder="Enter a color"/> <hello-world/> </body>
選擇一:使用 @ 實現單向文字繫結上面的程式碼現在是不能工作的。因為我們用了一個隔離的scope,指令內部的 {{color}} 表示式被隔離在指令內部的scope中(不是父scope)。但是外面的輸入框元素中的 ng-model 指令是指向父scope中的 color 屬性的。所以,我們需要一種方式來繫結隔離scope和父scope中的這兩個引數。在Angular中,這種資料繫結可以通過為指令所在的HTML元素新增屬性和並指令定義物件中配置相應的 scope 屬性來實現。讓我們來細究一下建立資料繫結的幾種方式。
在下面的指令定義中,我們指定了隔離scope中的屬性 color 繫結到指令所在HTML元素上的引數 colorAttr。在HTML標記中,你可以看到 {{color}}表示式被指定給了 color-attr 引數。當表示式的值發生改變時,color-attr 引數也跟著改變。隔離scope中的 color 屬性的值也相應地被改變。
JavaScript
app.directive('helloWorld', function() { return { scope: { color: '@colorAttr' }, .... // the rest of the configurations }; });
XHTML更新後的HTML標記程式碼如下:
<body ng-controller="MainCtrl"> <input type="text" ng-model="color" placeholder="Enter a color"/> <hello-world color-attr="{{color}}"/> </body>
注意點:我們稱這種方式為單項繫結,是因為在這種方式下,你只能將字串(使用表示式{{}})傳遞給引數。當父scope的屬性變化時,你的隔離scope模型中的屬性值跟著變化。你甚至可以在指令內部監控這個scope屬性的變化,並且觸發一些任務。然而,反向的傳遞並不工作。你不能通過對隔離scope屬性的操作來改變父scope的值。
當隔離scope屬性和指令元素引數的名字一樣是,你可以更簡單的方式設定scope繫結:
JavaScript
app.directive('helloWorld', function() { return { scope: { color: '@' }, .... // the rest of the configurations }; });
XHTML相應使用指令的HTML程式碼如下:
<hello-world color="{{color}}"/>
選擇二:使用 = 實現雙向繫結
讓我們將指令的定義改變成下面的樣子:
JavaScript
app.directive('helloWorld', function() { return { scope: { color: '=' }, .... // the rest of the configurations }; });
XHTML相應的HTML修改如下:
<body ng-controller="MainCtrl"> <input type="text" ng-model="color" placeholder="Enter a color"/> <hello-world color="color"/> </body>
選擇三:使用 & 在父scope中執行函式與 @ 不同,這種方式讓你能夠給屬性指定一個真實的scope資料模型,而不是簡單的字串。這樣你就可以傳遞簡單的字串、陣列、甚至複雜的物件給隔離scope。同時,還支援雙向的繫結。每當父scope屬性變化時,相對應的隔離scope中的屬性也跟著改變,反之亦然。和之前的一樣,你也可以監視這個scope屬性的變化。
有時候從隔離scope中呼叫父scope中定義的函式是非常有必要的。為了能夠訪問外部scope中定義的函式,我們使用 &。比如我們想要從指令內部呼叫 sayHello() 方法。下面的程式碼告訴我們該怎麼做:
JavaScript
app.directive('sayHello', function() { return { scope: { sayHelloIsolated: '&' }, .... // the rest of the configurations }; });
XHTML相應的HTML程式碼如下:
<body ng-controller="MainCtrl"> <input type="text" ng-model="color" placeholder="Enter a color"/> <say-hello sayHelloIsolated="sayHello()"/> </body>
父scope、子scope以及隔離scope的區別這個 Plunker 例子對上面的概念做了很好的詮釋。
作為一個Angular的新手,你可能會在選擇正確的指令scope的時候感到困惑。預設情況下,指令不會建立一個新的scope,而是沿用父scope。但是在很多情況下,這並不是我們想要的。如果你的指令重度地使用父scope的屬性、甚至建立新的屬性,會汙染父scope。讓所有的指令都使用同一個父scope不會是一個好主意,因為任何人都可能修改這個scope中的屬性。因此,下面的這個原則也許可以幫助你為你的指令選擇正確的scope。
1.父scope(scope: false) – 這是預設情況。如果你的指令不操作父scoe的屬性,你就不需要一個新的scope。這種情況下是可以使用父scope的。
2.子scope(scope: true) – 這會為指令建立一個新的scope,並且原型繼承自父scope。如果你的指令scope中的屬性和方法與其他的指令以及父scope都沒有關係的時候,你應該建立一個新scope。在這種方式下,你同樣擁有父scope中所定義的屬性和方法。
3.隔離scope(scope:{}) – 這就像一個沙箱!當你建立的指令是自包含的並且可重用的,你就需要使用這種scope。你在指令中會建立很多scope屬性和方法,它們僅在指令內部使用,永遠不會被外部的世界所知曉。如果是這樣的話,隔離的scope是更好的選擇。隔離的scope不會繼承父scope。
Transclusion(嵌入)
Transclusion是讓我們的指令包含任意內容的方法。我們可以延時提取並在正確的scope下編譯這些嵌入的內容,最終將它們放入指令模板中指定的位置。 如果你在指令定義中設定 transclude:true,一個新的嵌入的scope會被建立,它原型繼承子父scope。 如果你想要你的指令使用隔離的scope,但是它所包含的內容能夠在父scope中執行,transclusion也可以幫忙。
假設我們註冊一個如下的指令:
JavaScript
app.directive('outputText', function() { return { transclude: true, scope: {}, template: '<div ng-transclude></div>' }; });
XHTML它使用如下:
<div output-text> <p>Hello {{name}}</p> </div>
transclude:’element’ 和 transclude:true的區別ng-transclude 指明在哪裡放置被嵌入的內容。在這個例子中DOM內容 <p>Hello {{name}}</p> 被提取和放置到 <div ng-transclude></div> 內部。有一個很重要的點需要注意的是,表示式{{name}}所對應的屬性是在父scope中被定義的,而非子scope。你可以在這個Plunker例子中做一些實驗。如果你想要學習更多關於scope的知識,可以閱讀這篇文章。
有時候我我們要嵌入指令元素本身,而不僅僅是它的內容。在這種情況下,我們需要使用 transclude:’element’。它和 transclude:true 不同,它將標記了 ng-transclude 指令的元素一起包含到了指令模板中。使用transclusion,你的link函式會獲得一個名叫 transclude 的連結函式,這個函式繫結了正確的指令scope,並且傳入了另一個擁有被嵌入DOM元素拷貝的函式。你可以在這個 transclude 函式中執行比如修改元素拷貝或者將它新增到DOM上等操作。 類似 ng-repeat 這樣的指令使用這種方式來重複DOM元素。仔細研究一下這個Plunker,它使用這種方式複製了DOM元素,並且改變了第二個例項的背景色。
同樣需要注意的是,在使用 transclude:’element’的時候,指令所在的元素會被轉換成HTML註釋。所以,如果你結合使用 transclude:’element’ 和 replace:false,那麼指令模板本質上是被新增到了註釋的innerHTML中——也就是說其實什麼都沒有發生!相反,如果你選擇使用 replace:true,指令模板會替換HTML註釋,那麼一切就會如果所願的工作。使用 replade:false 和 transclue:’element’有時候也是有用的,比如當你需要重複DOM元素但是並不想保留第一個元素例項(它會被轉換成註釋)的情況下。對這塊還有疑惑的同學可以閱讀stackoverflow上的這篇討論,介紹的比較清晰。
controller 函式和 require
如果你想要允許其他的指令和你的指令發生互動時,你需要使用 controller 函式。比如有些情況下,你需要通過組合兩個指令來實現一個UI元件。那麼你可以通過如下的方式來給指令新增一個 controller 函式。
JavaScript
app.directive('outerDirective', function() { return { scope: {}, restrict: 'AE', controller: function($scope, $compile, $http) { // $scope is the appropriate scope for the directive this.addChild = function(nestedDirective) { // this refers to the controller console.log('Got the message from nested directive:' + nestedDirective.message); }; } }; });
JavaScript這個程式碼為指令新增了一個名叫 outerDirective 的controller。當另一個指令想要互動時,它需要宣告它對你的指令 controller 例項的引用(require)。可以通過如下的方式實現:
app.directive('innerDirective', function() { return { scope: {}, restrict: 'AE', require: '^outerDirective', link: function(scope, elem, attrs, controllerInstance) { //the fourth argument is the controller instance you require scope.message = "Hi, Parent directive"; controllerInstance.addChild(scope); } }; });
XHTML相應的HTML程式碼如下:
<outer-directive> <inner-directive></inner-directive> </outer-directive>
require: ‘^outerDirective’ 告訴Angular在元素以及它的父元素中搜尋controller。這樣被找到的 controller 例項會作為第四個引數被傳入到 link 函式中。在我們的例子中,我們將嵌入的指令的scope傳送給父親指令。如果你想嘗試這個程式碼的話,請在開啟瀏覽器控制檯的情況下開啟這個Plunker。同時,這篇Angular官方文件上的最後部分給了一個非常好的關於指令互動的例子,是非常值得一讀的。
一個記事本應用
這一部分,我們使用Angular指令建立一個簡單的記事本應用。我們會使用HTML5的 localStorage 來儲存筆記。最終的產品在這裡,你可以先睹為快。
我們會建立一個展現記事本的指令。使用者可以檢視他/她建立過的筆記記錄。當他點選 add new 按鈕的時候,記事本會進入可編輯狀態,並且允許建立新的筆記。當點選 back 按鈕的時候,新的筆記會被自動儲存。筆記的儲存使用了一個名叫 noteFactory 的工廠類,它使用了 localStorage。工廠類中的程式碼是非常直接和可理解的。所以我們就集中討論指令的程式碼。
第一步
我們從註冊 notepad 指令開始。
JavaScript
app.directive('notepad', function(notesFactory) { return { restrict: 'AE', scope: {}, link: function(scope, elem, attrs) { }, templateUrl: 'templateurl.html' }; });
因為我們想讓指令可重用,所以選擇使用隔離的scope。這個指令可以擁有很多與外界沒有關聯的屬性和方法。這裡有幾點需要注意的:
- 這個指令可以以屬性或者元素的方式被使用,這個被定義在 restrict 屬性中。
- 現在的link函式是空的
- 這個指令從 templateurl.html 中獲取指令模板
第二步
下面的HTML組成了指令的模板。
XHTML
<div class="note-area" ng-show="!editMode"> <ul> <li ng-repeat="note in notes|orderBy:'id'"> <a href="#" ng-click="openEditor(note.id)">{{note.title}}</a> </li> </ul> </div> <div id="editor" ng-show="editMode" class="note-area" contenteditable="true" ng-bind="noteText"></div> <span><a href="#" ng-click="save()" ng-show="editMode">Back</a></span> <span><a href="#" ng-click="openEditor()" ng-show="!editMode">Add Note</a></span>
note 物件中封裝了 title,id 和 content。幾個重要的注意點:
- ng-repeat 用來遍歷 notes 中所有的筆記,並且按照自動生成的 id 屬性進行升序排序。
- 我們使用一個叫 editMode 的屬性來指明我們現在在哪種模式下。在編輯模式下,這個屬性的值為 true 並且可編輯的 div 節點會顯示。使用者在這裡輸入自己的筆記。
- 如果 editMode 為 false,我們就在檢視模式,顯示所有的 notes。
- 兩個按鈕也是基於 editMode 的值而顯示和隱藏。
- ng-click 指令用來響應按鈕的點選事件。這些方法將和 editMode 一起新增到scope中。
- 可編輯的 div 框與 noteText 相繫結,存放了使用者輸入的文字。如果你想編輯一個已存在的筆記,那麼這個模型會用它的文字內容初始化這個 div 框。
第三步
我們在scope中建立一個名叫 restore() 的新函式,它用來初始化我們應用中的各種控制器。 它會在 link 函式執行的時候被呼叫,也會在 save 按鈕被點選的時候呼叫。
JavaScript
scope.restore = function() { scope.editMode = false; scope.index = -1; scope.noteText = ''; };
第四步
我們在 link 函式的內部建立這個函式。 editMode 和 noteText 之前已經解釋過了。 index 用來跟蹤當前正在編輯的筆記。 當我們在建立一個新的筆記的時候,index 的值會設成 -1. 我們在編輯一個已存在的筆記的時候,它包含了那個 note 物件的 id 值。
現在我們要建立兩個scope函式來處理編輯和儲存操作。
JavaScript
scope.openEditor = function(index) { scope.editMode = true; if (index !== undefined) { scope.noteText = notesFactory.get(index).content; scope.index = index; } else { scope.noteText = undefined; } }; scope.save = function() { if (scope.noteText !== '') { var note = {}; note.title = scope.noteText.length > 10 ? scope.noteText.substring(0, 10) + '. . .' : scope.noteText; note.content = scope.noteText; note.id = scope.index != -1 ? scope.index : localStorage.length; scope.notes = notesFactory.put(note); } scope.restore(); };
openEditor 為編輯器做準備工作。如果我們在編輯一個筆記,它會獲取當前筆記的內容並且通過使用 ng-bind 將內容更新到可編輯的 div 中。這兩個函式有幾點需要注意:
- 如果我們在建立一個新的筆記,我們會將 noteText 設定成 undefined,以便當我們在儲存筆記的時候,觸發相應的監聽器。
- 如果 index 引數是 undefined,它表明使用者正在建立一個新的筆記。
- save 函式通過使用 notesFactory 來儲存筆記。在儲存完成後,它會重新整理 notes 陣列,從而監聽器能夠監測到筆記列表的變化,來及時更新。
- save 函式呼叫在重置 controllers 之後呼叫restore(),從而可以從編輯模式進入檢視模式。
第五步
在 link 函式執行時,我們初始化 notes 陣列,並且為可編輯的 div 框繫結一個 keydown 事件,從而保證我們的 nodeText 模型與 div 中的內容保持同步。我們使用這個 noteText 來儲存我們的筆記內容。
JavaScript
var editor = elem.find('#editor'); scope.restore(); // initialize our app controls scope.notes = notesFactory.getAll(); // load notes editor.bind('keyup keydown', function() { scope.noteText = editor.text().trim(); });
第六步
最後,我們在HTML如同使用其他的HTML元素一樣使用我們的指令,然後開始做筆記吧。
XHTML
<h1 class="title">The Note Making App</h1> <notepad/>
原始碼下載:https://github.com/jsprodotcom/source/blob/master/AngularJS_Note_Taker-source_code.zip
總結
一個很重要的點需要注意的是,任何使用jQuery能做的事情,我們都能用Angular指令來做到,並且使用更少的程式碼。所以,在使用jQuery之前,請考慮一下我們能否在不進行DOM操作的情況下以更好的方式來完成任務。
相關文章
- AngularJS 指令實踐指南(二)AngularJS
- AngularJS 指令實踐指南(一)AngularJS
- AngularJS 指令實現原理AngularJS
- 指令<AngularJs>AngularJS
- AngularJS最佳編碼實踐指南AngularJS
- AngularJS 4(三)【指令】AngularJS
- angularJS 系列(七)---指令AngularJS
- AngularJS - 自定義指令AngularJS
- angularjs之$timeout指令AngularJS
- Shell指令碼最佳實踐指令碼
- Angularjs學習筆記指令AngularJS筆記
- 學習AngularJs:Directive指令用法AngularJS
- AngularJS教程二——內部指令AngularJS
- monkey自定義指令碼實踐指令碼
- 走進AngularJs(五)自定義指令----(下)AngularJS
- 走進AngularJs(三)自定義指令-----(上)AngularJS
- 走進AngularJs(四)自定義指令----(中)AngularJS
- AngularJS教程二十三—— 通用下拉指令AngularJS
- AngularJS最佳實踐: 請小心使用 ng-repeat 中的 $indexAngularJSIndex
- 《AngularJs權威指南》學習筆記---指令AngularJS筆記
- AngularJS教程二十五—— 模態窗指令AngularJS
- 改善使用者體驗的 3 個 AngularJS 指令AngularJS
- angularjs的ng-repeat指令下的scope作用域AngularJS
- 將js/css指令碼放到png圖片中的實踐。JSCSS指令碼
- 走進AngularJs(二) ng模板中常用指令的使用方式AngularJS
- Lua 指令碼在 Redis 事務中的應用實踐指令碼Redis
- Lua指令碼在Redis事務中的應用實踐指令碼Redis
- 高複用性自動化指令碼設計實踐指令碼
- AngularJs中,如何在render完成之後,執行Js指令碼AngularJS指令碼
- Angularjs——初識AngularJSAngularJS
- 《大話作業系統——紮實project實踐派》(8.2)(除了指令集.完)作業系統Project
- 效能測試必知必會:Shell指令碼設計實踐指南指令碼
- AngularJS開發實戰入門教程AngularJS
- AngularJS 實現簡單購物車AngularJS
- 如何使用angularjs實現按鈕事件AngularJS事件
- AngularJS實戰專案(Ⅰ)--含原始碼AngularJS原始碼
- angularjs 實現圖片上傳實時預覽AngularJS
- angularJsAngularJS