没有合适的资源?快使用搜索试试~ 我知道了~
AngularJS指令实践指南(二)
0 下载量 185 浏览量
2021-01-29
19:22:01
上传
评论
收藏 116KB PDF 举报
温馨提示
试读
7页
这个系列教程的第一部分给出了AngularJS指令的基本概述,在文章的最后我们介绍了如何隔离一个指令的scope。第二部分将承接上一篇继续介绍。首先,我们会看到在使用隔离scope的情况下,如何从指令内部访问到父scope的属性。接着,我们会基于对 controller函数和transclusions讨论如何为指令选择正确的scope。这篇文章的最后会以通过一个完整的记事本应用来实践指令的使用。通常,隔离指令的scope会带来很多的便利,尤其是在你要操作多个scope模型的时候。但有时为了使代码能够正确工作,你也需要从指令内部访问父
资源详情
资源评论
资源推荐
AngularJS指令实践指南(二)指令实践指南(二)
这个系列教程的第一部分给出了AngularJS指令的基本概述,在文章的最后我们介绍了如何隔离一个指令的scope。第二部分
将承接上一篇继续介绍。首先,我们会看到在使用隔离scope的情况下,如何从指令内部访问到父scope的属性。接着,我们
会基于对 controller 函数和 transclusions 讨论如何为指令选择正确的scope。这篇文章的最后会以通过一个完整的记事本应用
来实践指令的使用。
隔离scope和父scope之间的数据绑定
通常,隔离指令的scope会带来很多的便利,尤其是在你要操作多个scope模型的时候。但有时为了使代码能够正确工作,你
也需要从指令内部访问父scope的属性。好消息是Angular给了你足够的灵活性让你能够有选择性的通过绑定的方式传入父
scope的属性。让我们重温一下我们的 helloWorld 指令,它的背景色会随着用户在输入框中输入的颜色名称而变化。还记得当
我们对这个指令使用隔离scope的之后,它不能工作了吗?现在,我们来让它恢复正常。
假设我们已经初始化完成app这个变量所指向的Angular模块。那么我们的 helloWorld 指令如下面代码所示:
app.directive('helloWorld', function() {
return {
scope: {},
restrict: 'AE',
replace: true,
template: '<p style="background-color:{{color}}">Hello World</p>',
link: function(scope, elem, attrs) {
elem.bind('click', function() {
elem.css('background-color','white');
scope.$apply(function() {
scope.color = "white";
});
});
elem.bind('mouseover', function() {
elem.css('cursor', 'pointer');
});
}
};
});
使用这个指令的HTML标签如下:
<body ng-controller="MainCtrl">
<input type="text" ng-model="color" placeholder="Enter a color"/>
<hello-world/>
</body>
上面的代码现在是不能工作的。因为我们用了一个隔离的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 属性的值也相应地被改变。
app.directive('helloWorld', function() {
return {
scope: {
color: '@colorAttr'
},
....
// the rest of the configurations
};
});
更新后的HTML标记代码如下:
<body ng-controller="MainCtrl">
<input type="text" ng-model="color" placeholder="Enter a color"/>
<hello-world color-attr="{{color}}"/>
</body>
我们称这种方式为单项绑定,是因为在这种方式下,你只能将字符串(使用表达式{{}})传递给参数。当父scope的属性变化时,
weixin_38607971
- 粉丝: 3
- 资源: 973
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0