AngularJS 指令實踐

時間  2019-11-10
標籤 angularjs 指令 實踐 欄目 AngularJS 简体版
原文   原文鏈接

指令（Directives）是全部AngularJS應用最重要的部分。儘管AngularJS已經提供了很是豐富的指令，但仍是常常須要建立應用特定的指令。這篇教程會爲你講述如何自定義指令，以及介紹如何在實際項目中使用。在這篇文章的最後，我會指導你如何使用Angular指令來建立一個簡單的記事本應用。javascript

概述

一個指令用來引入新的HTML語法。指令是DOM元素上的標記，使元素擁有特定的行爲。舉例來講，靜態的HTML不知道如何來建立和展示一個日期選擇器控件。讓HTML能識別這個語法，咱們須要使用指令。指令經過某種方法來建立一個可以支持日期選擇的元素。咱們會按部就班地介紹這是如何實現的。 若是你寫過AngularJS的應用，那麼你必定已經使用過指令，無論你有沒有意識到。你確定已經用過簡單的指令，好比 ng-mode, ng-repeat, ng-show等。這些指令都賦予DOM元素特定的行爲。例如，ng-repeat 重複特定的元素，ng-show 有條件地顯示一個元素。若是你想讓一個元素支持拖拽，你也須要建立一個指令來實現它。指令背後基本的想法很簡單。它經過對元素綁定事件監聽或者改變DOM而使HTML擁有真實的交互性。css

jQuery視角

想象一下使用jQuery如何建立一個日期選擇器。首先，咱們在HTML中添加一個普通的輸入框，而後經過jQuery調用 $(element).dataPicker() 來將它轉變成一個日期選擇器。可是，仔細想一下。當一個設計人員過來檢查HTML標記的時候，他/她可否馬上猜到這個字段實際上表示的內容？這只是一個簡單的輸入框，或者一個日期選擇器？你須要查看jQuery代碼來肯定這些。而Angular的方法是使用一個指令來擴展HTML。因此，一個日期選擇器的指令能夠是下面的形式：html

XHTMLjava

<input type="text" />

建立自定義指令：這種建立UI組建的方式更加直接和清晰。你能夠輕易地經過查看元素就明白這究竟是什麼。node

一個Angular指令能夠有如下的四種表現形式：git

1. 一個新的HTML元素（<data-picker></data-picker>）angularjs

2. 元素的屬性（<input type=」text」 data-picker/>）github

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: '&amp;'

    },

    ....

    // 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操做的狀況下以更好的方式來完成任務。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程