AngularJS -- 指令(创建自定义指令)

浏览数：102 / 时间：2015年06月09日

什么是指令

注:本指南是针对已经熟悉AngularJS基础知识的开发人员。如果你才刚刚开始,我建议查看系列教程。

指令是一个Dom元素上的标签(和元素上的属性, CSS 类样式一样，属于这个Dom元素)，它告诉AngualrJS的HTML 编译器($compile)，去附加一个行为到这个Dom元素上去，这个行为可以改变这个Dom元素，或者这个Dom元素的子元素。

AngularJS 有一套自己内置的指令，如：ngBind，ngModel，ngClass等等...你可以自定义的指令。当Angular应用程序起来之后，会先去加载Dom树，然后去匹配你的指令，然后执行。

HTML 编译器 -- 对于Angularjs来说，编译意味着递归去给HTML添加一些事件监听，让DOM元素和Angualr之间可以进行交互，相互作用。这里使用编译这个术语的原因是：添加事件监听这个过程，刚好反应了我们C#，Java等编程语言将源代码编译成应用的这个过程。

匹配指令

在我们编写我们的第一个自定义指令之前，我能需要知道AngularJS的HTML编译器是怎么确定在什么时候使用我们自定义的指令的。

下面这个例子中，我们可以看到<Input>元素匹配到了 ngModel 这个指令。

<input ng-model="foo">

下面这个例子也是匹配到了 ngModel 这个指令：

<input data-ng:model="foo">

AngularJS使用元素标签类型(eg:input)和属性名称来确定哪个元素匹配到了哪个指令。标准的指令(eg: ngModel)是区分大小写的，使用了驼峰命名法则。然而，由于HTML是不区分大小写的，所以后来也不区分大小写了…(感觉等于没说…) 但是通常我们都是使用 [-] 这个破折号来代表一个指令(通常，并不是必须)。

一般的使用方法如下：

1.使用 x- 或者 data- 在元素或者属性前。

2.使用 : 或者 - 或者 _ 来代替了驼峰命名法则。

<div ng-app="docsBindExample">
  <div ng-controller="Controller">
    Hello <input ng-model=‘name‘> <hr/>
    <span ng-bind="name"></span> <br/>
    <span ng:bind="name"></span> <br/>
    <span ng_bind="name"></span> <br/>
    <span data-ng-bind="name"></span> <br/>
    <span x-ng-bind="name"></span> <br/>
  </div>
</div>
<script src="https://code.angularjs.org/1.3.0/angular.min.js"></script>
<script type="text/javascript">
  (function(){
    angular.module(‘docsBindExample‘, [])
  .controller(‘Controller‘, [‘$scope‘, function($scope) {
    $scope.name = ‘Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)‘;
  }]);
})();
</script>