Page 102 - AngularJS权威教程

82 第 10 章 指令详解

这里有一个数据模型（ng-model），一个函数（sendMail()）和一个字符串（from-name）。
在指令中做如下设置以访问这些内容：

scope: {
ngModel: '=', // 将ngModel同指定对象绑定
onSend: '&', // 将引用传递给这个方法
fromName: '@' // 储存与fromName相关联的字符串
}

双向数据绑定
双向数据绑定或许是AngularJS中最强大的功能，借助它我们可以将一个私有作用域中的属
性同DOM中的属性值进行绑定。在前面一章已经有一个很好的例子，展示了ng-model如何在外
部世界同自定义的指令之间进行双向数据绑定，这个指令在很多方面都同ng-bind相似。回顾一
下上一章的内容，并做相应的练习，来更好地理解这个重要的概念。

10.3.1 transclude

transclude是一个可选的参数。如果设置了，其值必须为true，它的默认值是false。

嵌入有时被认为是一个高级主题，但某些情况下它与我们刚刚学习过的作用域之间会有非常
好的配合。使用嵌入也会很好地扩充我们的工具集，特别是在创建可以在团队、项目、AngularJS
社区之间共享的HTML代码片段时。

嵌入通常用来创建可复用的组件，典型的例子是模态对话框或导航栏。
我们可以将整个模板，包括其中的指令通过嵌入全部传入一个指令中。这样做可以将任意内
容和作用域传递给指令。transclude参数就是用来实现这个目的的，指令的内部可以访问外部
指令的作用域，并且模板也可以访问外部的作用域对象。
为了将作用域传递进去，scope参数的值必须通过{}或true设置成隔离作用域。如果没有设
置scope参数，那么指令内部的作用域将被设置为传入模板的作用域。

只有当你希望创建一个可以包含任意内容的指令时，才使用transclude: true。

嵌入允许指令的使用者方便地提供自己的HTML模板，其中可以包含独特的状态和行为，并
对指令的各方面进行自定义。

下面一起来实现个小例子，创建一个可以被自定义的可复用指令。
我们来创建一个可以复用的侧边栏，同WordPress博客的侧边栏很相似。我们希望可以保持
CSS样式的一致性，同时又希望可以在复用时尽量少写HTML代码。
例如，假设我们想创建一个包括标题和少量HTML内容的侧边栏，如下所示：

<div sideboxtitle="Links">
<ul>
<li>First link</li>
<li>Second link</li>
</ul>
</div>