`
wangsuting
  • 浏览: 29778 次
社区版块
存档分类
最新评论

转载》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的属性变化时,你的隔离scope模型中的属性值跟着变化。你甚至可以在指令内部监控这个scope属性的变化,并且触发一些任务。然而,反向的传递并不工作。你不能通过对隔离scope属性的操作来改变父scope的值。

注意点:
当隔离scope属性和指令元素参数的名字一样是,你可以更简单的方式设置scope绑定:

app.directive('helloWorld'function() {
return {
scope: {
color: '@'
},
....
// the rest of the configurations
};
});

相应使用指令的HTML代码如下:

<hello-world color="{{color}}"/>

选择二:使用 = 实现双向绑定

让我们将指令的定义改变成下面的样子

app.directive('helloWorld'function() {
return {
scope: {
color: '='
},
....
// the rest of the configurations
};
});

相应的HTML修改如下:

<body ng-controller="MainCtrl">
<input type="text" ng-model="color" placeholder="Enter a color"/>
<hello-world color="color"/>
</body>

与 @ 不同,这种方式让你能够给属性指定一个真实的scope数据模型,而不是简单的字符串。这样你就可以传递简单的字符串、数组、甚至复杂的对象给隔离scope。同时,还支持双向的绑定。每当父scope属性变化时,相对应的隔离scope中的属性也跟着改变,反之亦然。和之前的一样,你也可以监视这个scope属性的变化。

选择三:使用 & 在父scope中执行函数

有时候从隔离scope中调用父scope中定义的函数是非常有必要的。为了能够访问外部scope中定义的函数,我们使用 &。比如我们想要从指令内部调用 sayHello() 方法。下面的代码告诉我们该怎么做:

app.directive('sayHello'function() {
return {
scope: {
sayHelloIsolated: '&amp;'
},
....
// the rest of the configurations
};

});

相应的HTML代码如下:

<body ng-controller="MainCtrl">
<input type="text" ng-model="color" placeholder="Enter a color"/>
<say-hello sayHelloIsolated="sayHello()"/>
</body>

这个 Plunker 例子对上面的概念做了很好的诠释。

父scope、子scope以及隔离scope的区别

作为一个Angular的新手,你可能会在选择正确的指令scope的时候感到困惑。默认情况下,指令不会创建一个新的scope,而是沿用父scope。但是在很多情况下,这并不是我们想要的。如果你的指令重度地使用父scope的属性、甚至创建新的属性,会污染父scope。让所有的指令都使用同一个父scope不会是一个好主意,因为任何人都可能修改这个scope中的属性。因此,下面的这个原则也许可以帮助你为你的指令选择正确的scope。

1.父scope(scope: false) – 这是默认情况。如果你的指令不操作父scoe的属性,你就不需要一个新的scope。这种情况下是可以使用父scope的。

2.子scope(scope: true) – 这会为指令创建一个新的scope,并且原型继承自父scope。如果你的指令scope中的属性和方法与其他的指令以及父scope都没有关系的时候,你应该创建一个新scope。在这种方式下,你同样拥有父scope中所定义的属性和方法。

3.隔离scope(scope:{}) – 这就像一个沙箱!当你创建的指令是自包含的并且可重用的,你就需要使用这种scope。你在指令中会创建很多scope属性和方法,它们仅在指令内部使用,永远不会被外部的世界所知晓。如果是这样的话,隔离的scope是更好的选择。隔离的scope不会继承父scope。

原文链接: sitepoint 翻译: 伯乐在线 陈 鑫伟
译文链接: http://blog.jobbole.com/62999/

分享到:
评论

相关推荐

    AngularJS指令实践指南(二)

    在本篇《AngularJS指令实践指南(二)》中,我们将深入探讨如何在隔离作用域(isolated scope)的环境下与父作用域进行交互,以及如何选择合适的scope策略。隔离作用域在处理多个模型时非常有用,因为它可以防止指令...

    AngularJS指令实践指南(一)

    指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用。在这篇文章的...

    angularjs指令 下拉框

    "angularjs指令 下拉框"这个主题聚焦于如何利用AngularJS创建一个自定义的下拉框(Dropdown)指令。下拉框在Web开发中非常常见,常用于选项选择或者导航菜单。 首先,我们需要理解AngularJS中的指令是如何工作的。...

    浅入angularjs指令

    关于angularjs指令的ppt 类容包括内置指令和自定义指令的相关讲解

    AngularJS 指令详细介绍.docx

    以上仅是AngularJS指令的冰山一角,实际中还有许多其他指令,如`ng-if`、`ng-show`、`ng-hide`、`ng-class`等,它们都提供了丰富的功能,帮助开发者构建复杂的应用。同时,指令也可以与控制器、服务、过滤器等其他...

    适用于 Google Maps JavaScript API 的 AngularJS 指令.zip

    适用于 Google Maps JavaScript API 的 AngularJS 指令项目不再积极维护此 repo 已严重过时,且无人维护。因此问题跟踪已被禁用。由于 angular 2 和其他竞争项目的存在,我们决定宣布不再积极维护此项目。如果有人想...

    AngularJS(权威指南一书扫描版)

    通过阅读《AngularJS 权威指南》,开发者将全面掌握 AngularJS 的设计理念和最佳实践,从而能够高效地构建高性能、可扩展的 Web 应用。不过要注意,尽管 AngularJS 在其时代非常流行,随着技术的发展,Angular(没有...

    AngularJS 自定义指令 - ECharts 2 雷达图

    在本文中,我们将深入探讨如何在AngularJS框架中创建自定义指令来封装ECharts 2的雷达图。ECharts是一款由百度开发的开源JavaScript图表库,它提供了丰富的可视化图表类型,包括雷达图。AngularJS是一个强大的前端...

    理解AngularJs指令

    ### 三、指令的高级用法 除了基本配置选项外,AngularJS 指令还支持更多的高级功能,包括但不限于: - **scope**: 可以创建新的作用域或者扩展父作用域。 - **transclude**: 支持指令内的内容被包含进模板中。 - *...

    angularJS权威学习指南手册

    **AngularJS权威学习指南手册** AngularJS是一款由Google维护的前端JavaScript框架,它极大地简化了构建动态Web应用的复杂性。本指南专为初学者设计,旨在帮助他们快速理解和掌握AngularJS的核心概念和技术。 **一...

    oauth-ng, 针对 OAuth 2.0隐式流的AngularJS指令.zip

    oauth-ng, 针对 OAuth 2.0隐式流的AngularJS指令 面向 OAuth 2.0 的 AngularJS指令 用于 OAuth 2.0隐式流处理器的AngularJS指令。文档 fork 在github上发送 repo 请求并发送带有主题分支的请求请求。 不要忘了为你的...

    用于密码强度栏的AngularJS指令_JavaScript_HTML_下载.zip

    在本文中,我们将深入探讨如何使用AngularJS指令创建一个密码强度栏,这是Web开发中一个常见且实用的功能。AngularJS,作为一个强大的JavaScript框架,允许开发者通过指令扩展HTML的功能,使其能够更好地与应用程序...

    ionic-rating, 一个angularjs指令,它负责可视化一个星级分级栏.zip

    ionic-rating, 一个angularjs指令,它负责可视化一个星级分级栏 离子分级一个angularjs指令,它负责可视化一个星级的rating,为离子生成。 还可以打印一半的( 仅显示): 为什么?angular-ui 具有相同的速率指令,但它...

    ElasticUI, 用于Elasticsearch的AngularJS指令.zip

    ElasticUI, 用于Elasticsearch的AngularJS指令 ElasticUIElasticUI是一套让开发者能够在Elasticsearch之上快速构建前端的AngularJS指令。 它构建在 Elasticsearch DSL的elastic.js 实现之上。用1 英镑的概念是为了在...

    angular-dc, 用于 dc.js的AngularJS指令.zip

    angular-dc, 用于 dc.js的AngularJS指令 角直流用于 dc.js的AngularJS指令 node: 正在启动下载版本或者开发版本。如果你使用 Bower,你可以通过以下方式安装: bower install angular-dc依赖项有关依赖关系,请参阅 ...

    smart-area, Steroids的AngularJS指令,Textareas.zip

    smart-area, Steroids的AngularJS指令,Textareas 关于类固醇的Textareas - 只是添加一个AngularJS指令特性使用支持多个集的单词高亮显示( 语法,关键字。)自动补全下拉建议( 在键入 @, 标签支持后提到用户),关键字...

    AngularJS 指令详细介绍

    AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng...

    angular-intro.js, 用于 intro.js的AngularJS指令.zip

    angular-intro.js, 用于 intro.js的AngularJS指令 angular-intro.js 一个包装 intro.js 插件功能的angularjs指令。 有关概述,请参见项目页中的 。 Bower你可以通过使用以下命令通过 Bower 安装这里软件包:bower ...

    angular-isotope, 轻松使用JQuery同位素的AngularJS指令.zip

    angular-isotope, 轻松使用JQuery同位素的AngularJS指令 角同位素用于JQuery同位素的AngularJS指令库。 集中于使用"ng重复"循环通过给定的array,轻松创建和填充一个单一的同位素项目。适用于稳定的同位素和 Angular...

    tc-angular-chartjs, 用于 Chart.js的AngularJS指令.zip

    tc-angular-chartjs, 用于 Chart.js的AngularJS指令 tc-angular-chartjs用于 Chart.js的AngularJS指令 安装确保你已经安装了安装 Chart.js 。 npmnpm install tc-angular-chartjs --save

Global site tag (gtag.js) - Google Analytics