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教程