AngularJS之directive

　　AngularJS是什么就不多舌了，這里簡單介紹下directive。內(nèi)容基本上是讀書筆記，所以如果你看過《AngularJS up and running》，那么這個(gè)可以忽略。

　　1、在AngularJS中，directives有兩個(gè)主要的類型：1⃣️UI展示的修改器，如ng-show、ng-model2⃣️可復(fù)用的組件，如菜單、輪播器、taps等。
　　2、directives定義：

1 angular.module('stockMarketApp', []) .directive('stockWidget', [function() {
2 　　return {
3　　　　 // Directive definition will go here
4 }; }]);

　　需要注意的是，定義的名字采取駝峰命名，而在HTML中應(yīng)用應(yīng)該是-連接。如上面的定義應(yīng)該為：<div stock-widget></div>
　　3、templateUrl，注意的是AngularJS只會(huì)在第一次碰到directive的時(shí)候去取一次，然后會(huì)緩存起來，之后都是從緩存中讀取。定義如下：

1 angular.module('stockMarketApp') .directive('stockWidget',         [function() {
2 　　return {
3　　　　 templateUrl: 'stock.html'
4 　　}; 
5 }]);

　　4、如果HTML比較小的話，可以直接寫行內(nèi)HTML，放在directive定義的template屬性中。
　　5、Restrict屬性：

The restrict keyword defines how someone using the directive in their code might use it. As mentioned previously, the default way of using directives is via attributes of existing elements (we used <div stock-widget> for ours).
When we create our directive, we have control in deciding how it’s used. The possible values for restrict (and thus the ways in which we can use our directive) are:
A
The letter A in the value for restrict specifies that the directive can be used as an attribute on existing HTML elements (such as <div stock-widget></div>). This is the default value.
E
The letter E in the value for restrict specifies that the directive can be used as a new HTML element (such as <stock-widget></stock-widget>).
C
The letter C in the value for restrict specifies that the directive can be used as a class name in existing HTML elements (such as <div class="stock-widget"> </div>).
M
The letter M in the value for restrict specifies that the directive can be used as HTML comments (such as <!-- directive: stock-widget -→). This was previ‐ ously necessary for directives that needed to encompass multiple elements, like multiple rows in tables, etc. The ng-repeat-start and ng-repeat-end directives were introduced for this sole purpose, so it’s preferable to use them instead of com‐ ment directives.

　　其中，A是默認(rèn)的。同時(shí)，既可以單獨(dú)使用，也可以多個(gè)一起用。比方說AE，既可以作為屬性，也可以作為元素單獨(dú)用。
　　6、link函數(shù)，對(duì)于directive來說link函數(shù)的作用跟controller對(duì)于view的作用一樣，它定義API和必要的函數(shù)。對(duì)于每一個(gè)directive的實(shí)例，AngularJS都會(huì)執(zhí)行其link函數(shù)，因此包含其完整的業(yè)務(wù)邏輯，也不會(huì)影響到其它的實(shí)例。其定義會(huì)傳遞幾個(gè)固有的參數(shù)，分別為directive元素的$scope、元素本身$element、元素上的屬性$attrs，定義如下：

1 link: function($scope, $element, $attrs) {}

　　其中，完整定義如下：

 1 angular.module('stockMarketApp') .directive('stockWidget', [function() {
 2 　　return {
 3 　　　　templateUrl: 'stock.html',
 4 　　　　restrict: 'AE',
 5 　　　　link: function($scope, $element, $attrs) {
 6 　　　　$scope.getChange = function(stock) {
 7 　　　　　　return Math.ceil(((stock.price - stock.previous) /
 8                   stock.previous) * 100);
 9            };
10 　　} };
11 }]);

　　7、Scope,默認(rèn)的情況下，directive都繼承其父元素的scope，并傳遞到link函數(shù)當(dāng)中。這會(huì)導(dǎo)致一些如下的問題：1⃣️新增的變量和函數(shù)會(huì)默認(rèn)修改父元素的scope，其父元素的scope莫名多了屬性和方法2⃣️可能會(huì)無意覆蓋掉父元素scope的函數(shù)或者變量3⃣️directive可以隱式的引用父元素的函數(shù)或者變量。因此，在定義directive的時(shí)候，AngularJS給了我們scope這個(gè)key，從而使我們能控制scope，其可用的值如下：

By default, each directive inherits its parent’s scope, which is passed to it in the link function. This can lead to the following problems:
? Adding variables/functions to the scope modifies the parent as well, which suddenly gets access to more variables and functions.
?? The directive might unintentionally override an existing function or variable with the same name.
? The directive can implicitly start using variables and functions from the parent. This might cause issues if we start renaming properties in the parent and forget to do it in the directive.

　　注意:false是默認(rèn)的值，即使用父元素傳遞下來的scope。其中object是最強(qiáng)大的，其不繼承父元素的scope，從傳統(tǒng)scope的樹形中脫離開來，隔離開來，需要directive使用的數(shù)據(jù)需要父元素在directive引用的時(shí)候通過HTML屬性傳遞進(jìn)來，其傳遞的值可以分為暗中類別，如下：

false
This is the default value, which basically tells AngularJS that the directive scope is the same as the parent scope, whichever one it is. So the directive gets access to all the variables and functions that are defined on the parent scope, and any modifi‐ cations it makes are immediately reflected in the parent as well.
true
This tells AngularJS that the directive scope inherits the parent scope, but creates a child scope of its own. The directive thus gets access to all the variables and func‐ tions from the parent scope, but any modifications it makes are not available in the parent. This is recommended if we need access to the parent’s functions and infor‐ mation, but need to make local modifications that are specific to the directive.
object
We can also pass an object with keys and values to the scope. This tells AngularJS to create what we call an isolated scope. This scope does not inherit anything from the parent, and any data that the parent scope needs to share with this directive needs to be passed in through HTML attributes. This is the best option when cre‐ ating reusable components that should be independent of how and where they are used.

　　8、Replace參數(shù)，之前的所有directive在應(yīng)用到HTML中的時(shí)候都會(huì)被當(dāng)做子元素插入進(jìn)去，可是有的時(shí)候我們需要其單獨(dú)作為一個(gè)元素使用，這個(gè)時(shí)候就可以用到replace參數(shù)了。默認(rèn)設(shè)置為false，即作為子元素插入進(jìn)去。當(dāng)設(shè)置為true的時(shí)候，directive的template會(huì)替換當(dāng)前元素，同時(shí)舊元素上的屬性都會(huì)移到新元素上。

總結(jié)

以上是生活随笔為你收集整理的AngularJS之directive的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。