AngularJS 指令Directives实践指南（四）

Transclusion（嵌入）

Transclusion是让我们的指令包含任意内容的方法。我们可以延时提取并在正确的scope下编译这些嵌入的内容，最终将它们放入指令模板中指定的位置。 如果你在指令定义中设置 transclude:true，一个新的嵌入的scope会被创建，它原型继承子父scope。 如果你想要你的指令使用隔离的scope，但是它所包含的内容能够在父scope中执行，transclusion也可以帮忙。

假设我们注册一个如下的指令：

app.directive('outputText', function() {

return {

transclude: true,

scope: {},

template: '<div ng-transclude></div>'

};

});

它使用如下：

<div output-text>

<p>Hello `name`</p>

</div>

ng-transclude 指明在哪里放置被嵌入的内容。在这个例子中DOM内容 <p>Hello `name`</p> 被提取和放置到 <div ng-transclude></div> 内部。有一个很重要的点需要注意的是，表达式`name`所对应的属性是在父scope中被定义的，而非子scope。你可以在这个Plunker例子中做一些实验。如果你想要学习更多关于scope的知识，可以阅读这篇文章。

transclude:’element’ 和 transclude:true的区别

有时候我我们要嵌入指令元素本身，而不仅仅是它的内容。在这种情况下，我们需要使用 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 函数。

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);

};

}

};

});

这个代码为指令添加了一个名叫 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);

}

};

});

相应的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 指令开始。

app.directive('notepad', function(notesFactory) {

return {

restrict: 'AE',

scope: {},

link: function(scope, elem, attrs) {

},

templateUrl: 'templateurl.html'

};

});

这里有几点需要注意的：

• 因为我们想让指令可重用，所以选择使用隔离的scope。这个指令可以拥有很多与外界没有关联的属性和方法。

• 这个指令可以以属性或者元素的方式被使用，这个被定义在 restrict 属性中。

• 现在的link函数是空的

• 这个指令从 templateurl.html 中获取指令模板

第二步

下面的HTML组成了指令的模板

<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 按钮被点击的时候调用。

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 class="title">The Note Making App</h1>

<notepad/>

总结

一个很重要的点需要注意的是，任何使用jQuery能做的事情，我们都能用Angular指令来做到，并且使用更少的代码。所以，在使用jQuery之前，请考虑一下我们能否在不进行DOM操作的情况下以更好的方式来完成任务。试着使用Angular来最小化jQuery的使用吧。
再来看一下我们的笔记本应用，删除笔记的功能被故意漏掉了。鼓励读者们自己实验和实现这个功能。 你可以从GitHub上下到这个Demo的源代码。

原文链接： sitepoint 翻译： 伯乐在线 - 陈 鑫伟
译文链接： http://blog.jobbole.com/62999/