前端框架之Angular（二）

这节主要说一下Angular的指令。Angular的指令有内置指令和自定义指令。

一、内置指令

在 Angular 中通过指令对DOM的功能进行扩展。这也是对常用功能的模块化封装。Angular 提供了一系列常用的指令，这些指定都是以 ng 开头的，我们称为内置指令。

后面会讲到如何自定义指令。其实内置指令和自定义指令是没有区别的，只是angular已经帮我们定义好了。

默认指令有如下几种常用的：

• ng-app 启用一个模块
• ng-model 双向绑定数据
• ng-init 直接初始化生成一个 scope
• ng-controller 调用 controller
• ng-click 绑定click事件
• ng-href
• ng-src
• ng-disabled
• ng-checked
• ng-readonly
• ng-selected
• ng-class
• ng-style

以 ng-click 为例，这样使用：

 <div ng-click=“onClick()”></div>

二、自定义指令（directive）

我们完全可以只依赖angular内置的指令，以及自己写的各种 controller 来完成一个应用。但是这样就无法复用一些通用的视图逻辑。

在 Angular 中，通过指令来拓展DOM元素的功能。我们可以把通用的逻辑封装成指令，在不同的地方都可以调用这些指令。比如我们可以把 分页器封装成一个指令，使用分页器的时候就不需要写复杂的逻辑，只要像下面这样指定几个参数即可：

 <div pagination page-total=‘100’ page-current=’20’></div>

这样就会调用 pagination 指令自动生成一个分页器，并通过两个属性告诉它总页数是100，当前是第20页。

那么我们这样编写指令：

.directive("pagination", function() {

    return {

      restrict: "EA",

      template:

        "<div>\

          <button ng-click='prev()' ng-disabled='!hasPrev()'>prev</button>\

          <span>{{current}}</span>\

          <button ng-click='next()' ng-disabled='!hasNext()'>next</button>\

        <div>",

      replace: true,

      scope: {

        total: "@pageTotal",

        current: "@pageCurrent"

      },

      link: function($scope) {

        $scope.total = parseInt($scope.total);

        $scope.current = parseInt($scope.current);

        $scope.prev = function() {

          $scope.current --;

        }

        $scope.next = function() {

          $scope.current ++;

        }

        $scope.hasNext = function() {

          return $scope.current < $scope.total;

        }

        $scope.hasPrev = function() {

          return $scope.current > 0;

        }

      }

    }

  })

其中， 我们定义了一个 pagination 指令，返回的一个对象描述了这个指令的全部定义。我们一点一点看：

restrict: “EA”表示这个指令可以通过元素名或者属性名的方式来使用，可选值有“EAC”三种，分别是Element,Attribute 和 Class 的缩写。

template 表示这个指令对应的模板，结合下面的replace: true会直接讲使用此指令的dom换成对应的模板。

scope是一个JSON对象，表示为这个指令创建了一个隔离的作用域，其中通过@语法把 DOM 中的属性复制到scope对象中。

link是一个链接函数，一般我们指令中的逻辑代码写在链接函数中。当Angular完成模块编译和数据绑定之后，会调用link函数进行链接。这里我们定义了四个函数，用来进行页面跳转动作和跳转条件的判断。

看完这个分页器指令基本就能知道一个指令的基本组成，一般一个指令的最重要部分就是模板、作用域和链接函数。如果你在这个模板上声明了一个 controller ，那么这里的作用域其实就是 controller的作用域。不过由于angular限制一个DOM上只能绑定一个隔离作用域，所以这里如果声明了一个controller，则无法再在 指令中声明隔离作用域。