angularjs中的指令实践开发指南(二)_angularjs

《angularjs中的指令实践开发指南(二)_angularjs》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、AngularJS中的指令实践开发指南(二)在AngularJS中的指令实践指南(一)中给大家介绍了，如何隔离一个指令的scopeo第二部分将承接上一篇继续介绍。首先，我们会看到在使用隔离scope的情况下，如何从指令内部访问到父scope的属性。接着，我们会基于对controller函数和transclusions讨论如何为指令选择.正确的scope。这篇文章的最后会以通过一个完整的记事本应用来实践指令的使用。隔离scope和父scope之间的数据绑定通常'，隔离指令的scope会带来很多的便利，尤其是在你要操作多个scope模型的时候。但冇时为了使代码能

2、够正确工作，你也需要从指令内部访问父scope的屈性。好消息是Angular给了你足够的灵活性让你能够有选择性的通过绑定的方式传入父scope的屈性。让我们重温一下我们的helloWorld指令，它的背景色会随着用户在输入框中输入的颜色名称而变化。还记得当我们对这个指令使用隔离scope的之后，它不能工作了吗？现在，我们来让它恢复正常。假设我们已经初始化完成app这个变量所指向的Angular模块。那么我们的helloWorld指令如下面代码所示：app.directive(，helloWorld，,function(){return{scope:{},re

3、strict:'AE',replace:true,template:'〈pstyle二〃background-color:{{color}}〃〉HelloWorld

4、sor','pointer');})；}}；})；使用这个指令的HTML标签如下:上面的代码现在是不能工作的。因为我们用了一个隔离的scope,指令内部的{{color}}表达式被隔离在指令内部的scope屮（不是父scope）o但是外而的输入框元素中的ng-model指令是指向父scope中的color属性的。所以，我们需要一种方

5、式來绑定隔离scope和父scope中的这两个参数。在Angular中，这种数据绑定可以通过为指令所在的HTML元索添加属性和并指令定义对象中配置相应的scope属性來实现。让我们來细究一下建立数据绑定的几种方式。选择一：使用@实现单向文本绑定在下而的指令定义屮，我们指定了隔离scope屮的屈性color绑定到指令所在HTML元素上的参数colorAttrc在HTML标记中,你可以看到{{color}}表达式被指定给了color-attr参数。当表达式的值发生改变吋，color-attr参数也跟着改变。隔离scope中的color属性的值也相应地被改变。ap

6、p.directive('helloWorld，,function(){return{scope:{color:'@colorAttr，},••••//therestoftheconfigurations}；})；更新后的HTML标记代码如F:〈inputtype二〃text"ng-model二〃color"placeholder•二〃Enteracolor，，/>我们称这种方式为单项绑定，是因为在这种方式下，你

7、只能将字符串（使用表达式{{}}）传递给参数。当父scope的属性变化时，你的隔离scope模型中的属性值跟着变化。你其至可以在指令内部监控这个scope属性的变化，并且触发一些任务。然而，反向的传递并不工作。你不能通过对隔离scope属性的操作來改变父scope的值。注意点:当隔离scope屈性和指令元素参数的名字一样是，你可以更简单的方式设置scope绑定：app.directiveChelloWorld，,function(){return{scope:{color:©},••••//therestoftheconfigurations};});相应使

8、用指令的HTML代码如下：