这个系列教程的第一部分给出了AngularJS指令的基本概述，在文章的最后我们介绍了如何隔离一个指令的scope。第二部分将承接上一篇继续介绍。首先，我们会看到在使用隔离scope的情况下，如何从指令内部访问到父scope的属性。接着，我们会基于对 controller 函数和 transclusions 讨论如何为指令选择正确的scope。这篇文章的最后会以通过一个完整的记事本应用来实践指令的使用。
隔离scope和父scope之间的数据绑定
通常，隔离指令的scope会带来很多的便利，尤其是在你要操作多个scope模型的时候。但有时为了使代码能够正确工作，你也需要从指令内部访问父scope的属性。好消息是Angular给了你足够的灵活性让你能够有选择性的通过绑定的方式传入父scope的属性。让我们重温一下我们的helloWorld指令，它的背景色会随着用户在输入框中输入的颜色名称而变化。还记得当我们对这个指令使用隔离scope的之后，它不能工作了吗？现在，我们来让它恢复正常。
假设我们已经初始化完成app这个变量所指向的Angular模块。那么我们的 helloWorld 指令如下面代码所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
app
.
directive
(
'helloWorld'
,
function
(
)
{
return
{
scope
:
{
}
Crayon-sy" style="border: 0px; margin: 0px; padding: 0px; font-size: inherit !important; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51,
restrict
'AE'
Crayon-sy" style="border: 0px; margin: 0px; padding: 0px; font-size: inherit !important; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51,
replace
true
Crayon-sy" style="border: 0px; margin: 0px; padding: 0px; font-size: inherit !important; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51,
template
'<p style="background-color:{{color}}">Hello World</p>'
Crayon-sy" style="border: 0px; margin: 0px; padding: 0px; font-size: inherit !important; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51,
link
(
scope
elem
attrs
{
.
bind
'click'
{
.
css
'background-color'
Crayon-sy" style="border: 0px; margin: 0px; padding: 0px; font-size: inherit !important; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51,
'white'
)
;
.
$
apply
(
{
.
color
=
"white"
;
;
;
'mouSEOver'
{
'cursor'
'pointer'
;
;
}
;
;
|
使用这个指令的HTML标签如下：
