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'); }); } }; });

app.directive('helloWorld', function() {

return {

scope: {},

restrict: 'AE',

replace: true,

template: '<p style="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标签如下：

<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 }; });

app.directive('helloWorld', function() {

return {

scope: {

color: '@colorAttr'

....

// the rest of the configurations

};

});

更新后的HTML标记代码如下：

<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 }; });

app.directive('helloWorld', function() {

return {

scope: {

color: '@'

....

// the rest of the configurations

};

});

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

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

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

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

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

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

app.directive('helloWorld', function() {

return {

scope: {

color: '='

....

// the rest of the configurations

};

});

相应的HTML修改如下：

<hello-world color="color"/>

</body>

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

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

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

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

app.directive('sayHello', function() {

return {

scope: {

sayHelloIsolated: '&'

....

// the rest of the configurations

};

});

相应的HTML代码如下：

<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。

Transclusion（嵌入）

Transclusion是让我们的指令包含任意内容的方法。我们可以延时提取并在正确的scope下编译这些嵌入的内容，最终将它们放入指令模板中指定的位置。如果你在指令定义中设置 transclude:true，一个新的嵌入的scope会被创建，它原型继承子父scope。如果你想要你的指令使用隔离的scope，但是它所包含的内容能够在父scope中执行，transclusion也可以帮忙。

假设我们注册一个如下的指令：

app.directive('outputText', function() { return { transclude: true, scope: {}, template: '<div ng-transclude></div>' }; });

app.directive('outputText', function() {

return {

transclude: true,

scope: {},

template: '<div ng-transclude></div>'

};

});

它使用如下：

<div output-text> <p>Hello {{name}}</p> </div>

<p>Hello {{name}}</p>

</div>

ng-transclude 指明在哪里放置被嵌入的内容。在这个例子中DOM内容 <p>Hello {{name}}</p> 被提取和放置到 <div ng-transclude></div> 内部。有一个很重要的点需要注意的是，表达式{{name}}所对应的属性是在父scope中被定义的，而非子scope。你可以在这个Plunker例子中做一些实验。如果你想要学习更多关于scope的知识，可以阅读这篇文章。

transclude:’element’ 和 transclude:true的区别

有时候我我们要嵌入指令元素本身，而不仅仅是它的内容。在这种情况下，我们需要使用 transclude:’element’。它和 transclude:true 不同，它将标记了 ng-transclude 指令的元素一起包含到了指令模板中。使用transclusion，你的link函数会获得一个名叫 transclude 的链接函数，这个函数绑定了正确的指令scope，并且传入了另一个拥有被嵌入DOM元素拷贝的函数。你可以在这个 transclude 函数中执行比如修改元素拷贝或者将它添加到DOM上等操作。类似 ng-repeat 这样的指令使用这种方式来重复DOM元素。仔细研究一下这个Plunker，它使用这种方式复制了DOM元素，并且改变了第二个实例的背景色。

同样需要注意的是，在使用 transclude:’element’的时候，指令所在的元素会被转换成HTML注释。所以，如果你结合使用 transclude:’element’ 和 replace:false，那么指令模板本质上是被添加到了注释的innerHTML中——也就是说其实什么都没有发生！相反，如果你选择使用 replace:true，指令模板会替换HTML注释，那么一切就会如果所愿的工作。使用 replade:false 和 transclue:’element’有时候也是有用的，比如当你需要重复DOM元素但是并不想保留第一个元素实例（它会被转换成注释）的情况下。对这块还有疑惑的同学可以阅读stackoverflow上的这篇讨论，介绍的比较清晰。

controller 函数和 require

如果你想要允许其他的指令和你的指令发生交互时，你需要使用 controller 函数。比如有些情况下，你需要通过组合两个指令来实现一个UI组件。那么你可以通过如下的方式来给指令添加一个 controller 函数。

app.directive('outerDirective', function() { return { scope: {}, restrict: 'AE', controller: function($scope, $compile, $http) { // $scope is the appropriate scope for the directive this.addChild = function(nestedDirective) { // this refers to the controller console.log('Got the message from nested directive:' + nestedDirective.message); }; } }; });

app.directive('outerDirective', function() {

return {

scope: {},

restrict: 'AE',

controller: function($scope, $compile, $http) {

// $scope is the appropriate scope for the directive

this.addChild = function(nestedDirective) { // this refers to the controller

console.log('Got the message from nested directive:' + nestedDirective.message);

};

}

};

});

这个代码为指令添加了一个名叫 outerDirective 的controller。当另一个指令想要交互时，它需要声明它对你的指令 controller 实例的引用(require)。可以通过如下的方式实现：

app.directive('innerDirective', function() { return { scope: {}, restrict: 'AE', require: '^outerDirective', link: function(scope, elem, attrs, controllerInstance) { //the fourth argument is the controller instance you require scope.message = "Hi, Parent directive"; controllerInstance.addChild(scope); } }; });

app.directive('innerDirective', function() {

return {

scope: {},

restrict: 'AE',

require: '^outerDirective',

link: function(scope, elem, attrs, controllerInstance) {

//the fourth argument is the controller instance you require

scope.message = "Hi, Parent directive";

controllerInstance.addChild(scope);

}

};

});

相应的HTML代码如下：

<outer-directive> <inner-directive></inner-directive> </outer-directive>

<outer-directive>

<inner-directive></inner-directive>

</outer-directive>

require: ‘^outerDirective’ 告诉Angular在元素以及它的父元素中搜索controller。这样被找到的 controller 实例会作为第四个参数被传入到 link 函数中。在我们的例子中，我们将嵌入的指令的scope发送给父亲指令。如果你想尝试这个代码的话，请在开启浏览器控制台的情况下打开这个Plunker。同时，这篇Angular官方文档上的最后部分给了一个非常好的关于指令交互的例子，是非常值得一读的。

一个记事本应用

这一部分，我们使用Angular指令创建一个简单的记事本应用。我们会使用HTML5的 localStorage 来存储笔记。最终的产品在这里，你可以先睹为快。
我们会创建一个展现记事本的指令。用户可以查看他/她创建过的笔记记录。当他点击 add new 按钮的时候，记事本会进入可编辑状态，并且允许创建新的笔记。当点击 back 按钮的时候，新的笔记会被自动保存。笔记的保存使用了一个名叫 noteFactory 的工厂类，它使用了 localStorage。工厂类中的代码是非常直接和可理解的。所以我们就集中讨论指令的代码。

第一步

我们从注册 notepad 指令开始。

app.directive('notepad', function(notesFactory) { return { restrict: 'AE', scope: {}, link: function(scope, elem, attrs) { }, templateUrl: 'templateurl.html' }; });

app.directive('notepad', function(notesFactory) {

return {

restrict: 'AE',

scope: {},

link: function(scope, elem, attrs) {

templateUrl: 'templateurl.html'

};

});

这里有几点需要注意的：

因为我们想让指令可重用，所以选择使用隔离的scope。这个指令可以拥有很多与外界没有关联的属性和方法。
这个指令可以以属性或者元素的方式被使用，这个被定义在 restrict 属性中。
现在的link函数是空的
这个指令从 templateurl.html 中获取指令模板

第二步

下面的HTML组成了指令的模板。

<div class="note-area" ng-show="!editMode"> <ul> <li ng-repeat="note in notes|orderBy:'id'"> <a href="#" ng-click="openEditor(note.id)">{{note.title}}</a> </li> </ul> </div> <div id="editor" ng-show="editMode" class="note-area" contenteditable="true" ng-bind="noteText"></div> <span><a href="#" ng-click="save()" ng-show="editMode">Back</a></span> <span><a href="#" ng-click="openEditor()" ng-show="!editMode">Add Note</a></span>

<ul>

<a href="#" ng-click="openEditor(note.id)">{{note.title}}</a>

</li>

</ul>

</div>

几个重要的注意点：

note 对象中封装了 title，id 和 content。
ng-repeat 用来遍历 notes 中所有的笔记，并且按照自动生成的 id 属性进行升序排序。
我们使用一个叫 editMode 的属性来指明我们现在在哪种模式下。在编辑模式下，这个属性的值为 true 并且可编辑的 div 节点会显示。用户在这里输入自己的笔记。
如果 editMode 为 false，我们就在查看模式，显示所有的 notes。
两个按钮也是基于 editMode 的值而显示和隐藏。
ng-click 指令用来响应按钮的点击事件。这些方法将和 editMode 一起添加到scope中。
可编辑的 div 框与 noteText 相绑定，存放了用户输入的文本。如果你想编辑一个已存在的笔记，那么这个模型会用它的文本内容初始化这个 div 框。

第三步

我们在scope中创建一个名叫 restore() 的新函数，它用来初始化我们应用中的各种控制器。它会在 link 函数执行的时候被调用，也会在 save 按钮被点击的时候调用。

scope.restore = function() { scope.editMode = false; scope.index = -1; scope.noteText = ''; };

scope.restore = function() {

scope.editMode = false;

scope.index = -1;

scope.noteText = '';

};

我们在 link 函数的内部创建这个函数。 editMode 和 noteText 之前已经解释过了。 index 用来跟踪当前正在编辑的笔记。当我们在创建一个新的笔记的时候，index 的值会设成 -1. 我们在编辑一个已存在的笔记的时候，它包含了那个 note 对象的 id 值。

第四步

现在我们要创建两个scope函数来处理编辑和保存操作。

scope.openEditor = function(index) { scope.editMode = true; if (index !== undefined) { scope.noteText = notesFactory.get(index).content; scope.index = index; } else { scope.noteText = undefined; } }; scope.save = function() { if (scope.noteText !== '') { var note = {}; note.title = scope.noteText.length > 10 ? scope.noteText.substring(0, 10) + '. . .' : scope.noteText; note.content = scope.noteText; note.id = scope.index != -1 ? scope.index : localStorage.length; scope.notes = notesFactory.put(note); } scope.restore(); };

scope.openEditor = function(index) {

scope.editMode = true;

if (index !== undefined) {

scope.noteText = notesFactory.get(index).content;

scope.index = index;

} else {

scope.noteText = undefined;

}

};

scope.save = function() {

if (scope.noteText !== '') {

var note = {};

note.title = scope.noteText.length > 10 ? scope.noteText.substring(0, 10) + '. . .' : scope.noteText;

note.content = scope.noteText;

note.id = scope.index != -1 ? scope.index : localStorage.length;

scope.notes = notesFactory.put(note);

}

scope.restore();

};

这两个函数有几点需要注意：

openEditor 为编辑器做准备工作。如果我们在编辑一个笔记，它会获取当前笔记的内容并且通过使用 ng-bind 将内容更新到可编辑的 div 中。
如果我们在创建一个新的笔记，我们会将 noteText 设置成 undefined，以便当我们在保存笔记的时候，触发相应的监听器。
如果 index 参数是 undefined，它表明用户正在创建一个新的笔记。
save 函数通过使用 notesFactory 来存储笔记。在保存完成后，它会刷新 notes 数组，从而监听器能够监测到笔记列表的变化，来及时更新。
save 函数调用在重置 controllers 之后调用restore()，从而可以从编辑模式进入查看模式。

第五步

在 link 函数执行时，我们初始化 notes 数组，并且为可编辑的 div 框绑定一个 keydown 事件，从而保证我们的 nodeText 模型与 div 中的内容保持同步。我们使用这个 noteText 来保存我们的笔记内容。

var editor = elem.find('#editor'); scope.restore(); // initialize our app controls scope.notes = notesFactory.getAll(); // load notes editor.bind('keyup keydown', function() { scope.noteText = editor.text().trim(); });

var editor = elem.find('#editor');

scope.restore(); // initialize our app controls

scope.notes = notesFactory.getAll(); // load notes

editor.bind('keyup keydown', function() {

scope.noteText = editor.text().trim();

});

第六步

最后，我们在HTML如同使用其他的HTML元素一样使用我们的指令，然后开始做笔记吧。

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

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

总结

一个很重要的点需要注意的是，任何使用jQuery能做的事情，我们都能用Angular指令来做到，并且使用更少的代码。所以，在使用jQuery之前，请考虑一下我们能否在不进行DOM操作的情况下以更好的方式来完成任务。试着使用Angular来最小化jQuery的使用吧。
再来看一下我们的笔记本应用，删除笔记的功能被故意漏掉了。鼓励读者们自己实验和实现这个功能。你可以从GitHub上下到这个Demo的源代码。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

深入学习AngularJS中数据的双向绑定机制
来自：http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS很小，只有60K&#…...
2024/4/28 1:47:21
AngularJS中的数据绑定
Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. This is awesome because it eliminates DOM manipulation from the list of things you have to worry about. 在AngularJS中…...
2024/4/25 23:18:08
割双眼皮20天的图片
...
2024/4/23 9:50:14
割双眼皮一热敷更肿了
...
2024/4/24 1:29:27
割双眼皮减少麻药疼痛
...
2024/4/28 15:50:06
AngularJS开发实战（1）
从接触angularjs到现在已经有1年多的时间期间已经用这个框架开发了大大小小的好几个项目，参考了其他一些项目的结构模版和自己摸索尝试，从一开始项目结构错乱复杂到现在我自认为是比较良好的结构划分，现在整理成一个系列留作团队培训内容和分…...
2024/4/23 22:21:06
割双眼皮分别
...
2024/4/23 14:23:02
（angularjs）数据的增删改查（添加用户，查询年龄，批量删除，全部删除，修改密码）类似题
上图： 上代码： <!DOCTYPE html> <html ng-app"UMApp"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,minimum-scale1.0,maximum-scale1.0,user-scalable…...
2024/4/24 1:52:29
（angularjs）数据的增删改查比之前的模板漂亮
上图： 上代码： <!DOCTYPE html> <html ng-app"OrderApp"> <head><meta charset"UTF-8"><title>订单管理</title><script type"text/javascript" src"jquery.1.12.4.js"…...
2024/4/24 2:14:25
AnjularJs的增删改查(单页网站)
2016.6.4 学习文献： 你的第一个AngularJS应用：https://segmentfault.com/a/1190000000347412 AngularJS 提交表单的方式：http://www.oschina.net/translate/submitting-ajax-forms-the-angularjs-way AngularJS中$http服务的简单用法:http://…...
2024/4/25 11:23:28
割了双眼皮淤血
...
2024/4/24 1:50:00
割了双眼皮影响月经吗
...
2024/4/23 6:12:40
割了双眼皮一个星期了
...
2024/4/24 0:44:51
割了双眼皮能吃瘦肉吗
...
2024/4/23 6:11:14
割了双眼皮露白
...
2024/4/23 9:15:37
为什么虚拟DOM更优胜一筹
注意： 虚拟DOM只是实现MVVM的一种方案，或者说是视图更新的一种策略。没有虚拟DOM比MVVM更好一说。我们回顾传统MVC框架,如backbone,它是将某个模板编译成模板函数,需要更新时,是自己手动将数据整体传入模板函数, 得到一个字符串,使用innerHTML刷新某个容…...
2024/4/23 13:15:23
既然Vue通过数据劫持可以精准探测数据变化,为什么还需要虚拟DOM进行diff检测差异?
既然Vue通过数据劫持可以精准探测数据变化,为什么还需要虚拟DOM进行diff检测差异? 考点: Vue的变化侦测原理前置知识: 依赖收集、虚拟DOM、响应式系统现代前端框架有两种方式侦测变化,一种是pull一种是push pull: 其代表为React,我们可以回忆一下React是如何侦测到变化的…...
2024/4/26 21:43:49
割了双眼皮可以出门吗
...
2024/4/26 12:19:49
割了双眼皮紧张
...
2024/4/26 22:14:46
割了双眼皮后要疼多久可以恢复正常
...
2024/4/26 11:51:24

AngularJS 指令实践指南（二）

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

选择一：使用 @ 实现单向文本绑定

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

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

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

Transclusion（嵌入）

transclude:’element’ 和 transclude:true的区别

controller 函数和 require

一个记事本应用

第一步

第二步

第三步

第四步

第五步

第六步

总结

相关文章

最新文章