首頁 > web前端 > js教程 > AngularJS中的指令實踐開發指南(二)_AngularJS

AngularJS中的指令實踐開發指南(二)_AngularJS

WBOY
發布: 2016-05-16 15:10:08
原創
1250 人瀏覽過

在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: '&'
},
....
// 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。

Transclusion(嵌入)

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

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

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

它使用如下:

<div output-text>
<p>Hello {{name}}</p>
</div>
登入後複製

ng-transclude 指明在哪里放置被嵌入的内容。在这个例子中DOM内容

Hello {{name}}

被提取和放置到
内部。有一个很重要的点需要注意的是,表达式{{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);
};
}
};
});
登入後複製

这个代码为指令添加了一个名叫 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);
}
};
});
登入後複製

相应的HTML代码如下:

<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'
};
});
登入後複製

这里有几点需要注意的:

因为我们想让指令可重用,所以选择使用隔离的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>
登入後複製

几个重要的注意点:

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 = '';
};
登入後複製

我们在 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 &#63; scope.noteText.substring(0, 10) + '. . .' : scope.noteText;
note.content = scope.noteText;
note.id = scope.index != -1 &#63; 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();
});
登入後複製

第六步

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

<h1 class="title">The Note Making App</h1>
<notepad/>
登入後複製

总结

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板