Angular 几篇关于指令的好文章收录(二)

前端之家收集整理的这篇文章主要介绍了Angular 几篇关于指令的好文章收录(二)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这个系列教程的第一部分给出了AngularJS指令的基本概述,在文章的最后我们介绍了如何隔离一个指令的scope。第二部分将承接上一篇继续介绍。首先,我们会看到在使用隔离scope的情况下,如何从指令内部访问到父scope的属性。接着,我们会基于对 controller 函数和 transclusions 讨论如何为指令选择正确的scope。这篇文章的最后会以通过一个完整的记事本应用来实践指令的使用。

隔离scope和父scope之间的数据绑定

通常,隔离指令的scope会带来很多的便利,尤其是在你要操作多个scope模型的时候。但有时为了使代码能够正确工作,你也需要从指令内部访问父scope的属性。好消息是Angular给了你足够的灵活性让你能够有选择性的通过绑定的方式传入父scope的属性。让我们重温一下我们的helloWorld指令,它的背景色会随着用户在输入框中输入的颜色名称而变化。还记得当我们对这个指令使用隔离scope的之后,它不能工作了吗?现在,我们来让它恢复正常。

假设我们已经初始化完成app这个变量所指向的Angular模块。那么我们的 helloWorld 指令如下面代码所示:

使用这个指令的HTML标签如下:

上面的代码现在是不能工作的。因为我们用了一个隔离的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 属性的值也相应地被改变。

2
<h1 class "title" > The Note Making App </h1>
<notepad/>

总结

一个很重要的点需要注意的是,任何使用jQuery能做的事情,我们都能用Angular指令来做到,并且使用更少的代码。所以,在使用jQuery之前,请考虑一下我们能否在不进行DOM操作的情况下以更好的方式来完成任务。试着使用Angular来最小化jQuery的使用吧。@H_426_502@

再来看一下我们的笔记本应用,删除笔记的功能被故意漏掉了。鼓励读者们自己实验和实现这个功能。 你可以从GitHub上下到这个Demo的源代码

转载地址:http://blog.jobbole.com/62999/

猜你在找的Angularjs相关文章