AngularJS之directive

AngularJS之directive

　　AngularJS是什么就不多舌了，这里简单介绍下directive。内容基本上是读书笔记，所以如果你看过《AngularJS up and running》，那么这个可以忽略。

　　1、在AngularJS中，directives有两个主要的类型：1⃣️UI展示的修改器，如ng-show、ng-model2⃣️可复用的组件，如菜单、轮播器、taps等。

　　2、directives定义：

 

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

　　需要注意的是，定义的名字采取驼峰命名，而在HTML中应用应该是-连接。如上面的定义应该为：<div stock-widget></div>

　　3、templateUrl，注意的是AngularJS只会在第一次碰到directive的时候去取一次，然后会缓存起来，之后都是从缓存中读取。定义如下：

 

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

　　4、如果HTML比较小的话，可以直接写行内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是默认的。同时，既可以单独使用，也可以多个一起用。比方说AE，既可以作为属性，也可以作为元素单独用。

　　6、link函数，对于directive来说link函数的作用跟controller对于view的作用一样，它定义API和必要的函数。对于每一个directive的实例，AngularJS都会执行其link函数，因此包含其完整的业务逻辑，也不会影响到其它的实例。其定义会传递几个固有的参数，分别为directive元素的$scope、元素本身$element、元素上的属性$attrs，定义如下：

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

　　其中，完整定义如下：

angular.module('stockMarketApp') .directive('stockWidget', [function() {
　　return {
　　　　templateUrl: 'stock.html',
　　　　restrict: 'AE',
　　　　link: function($scope, $element, $attrs) {
　　　　$scope.getChange = function(stock) {
　　　　　　return Math.ceil(((stock.price - stock.previous) /
                  stock.previous) * 100);
           };
　　} };
}]);

　　7、Scope,默认的情况下，directive都继承其父元素的scope，并传递到link函数当中。这会导致一些如下的问题：1⃣️新增的变量和函数会默认修改父元素的scope，其父元素的scope莫名多了属性和方法2⃣️可能会无意覆盖掉父元素scope的函数或者变量3⃣️directive可以隐式的引用父元素的函数或者变量。因此，在定义directive的时候，AngularJS给了我们scope这个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是默认的值，即使用父元素传递下来的scope。其中object是最强大的，其不继承父元素的scope，从传统scope的树形中脱离开来，隔离开来，需要directive使用的数据需要父元素在directive引用的时候通过HTML属性传递进来，其传递的值可以分为暗中类别，如下：

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参数，之前的所有directive在应用到HTML中的时候都会被当做子元素插入进去，可是有的时候我们需要其单独作为一个元素使用，这个时候就可以用到replace参数了。默认设置为false，即作为子元素插入进去。当设置为true的时候，directive的template会替换当前元素，同时旧元素上的属性都会移到新元素上。