<div 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 ng-show="editMode" 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 按钮被点击的时候调用。
scope.restore = function() { scope.editMode = false; scope.index = -1; scope.noteText = ''; };
我们在 link 函数的内部创建这个函数。 editMode 和 noteText 之前已经解释过了。 index 用来跟踪当前正在编辑的笔记。 当我们在创建一个新的笔记的时候，index 的值会设成 -1. 我们在编辑一个已存在的笔记的时候，它包含了那个 note 对象的 id 值。
第四步
现在我们要创建两个scope函数来处理编辑和保存操作。
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 来保存我们的笔记内容。
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元素一样使用我们的指令，然后开始做笔记吧。
<h1>The Note Making App</h1> <notepad/>
总结
一个很重要的点需要注意的是，任何使用jQuery能做的事情，我们都能用Angular指令来做到，并且使用更少的代码。所以，在使用jQuery之前，请考虑一下我们能否在不进行DOM操作的情况下以更好的方式来完成任务。试着使用Angular来最小化jQuery的使用吧。
再来看一下我们的笔记本应用，删除笔记的功能被故意漏掉了。鼓励读者们自己实验和实现这个功能。 你可以从GitHub上下到这个Demo的源代码。
您可能感兴趣的文章: