AngularJS中Directive指令系列

参考：

https://docs.angularjs.org/api/ng/service/$compile

http://www.zouyesheng.com/angular.html

Directive (指令)，是Angular最为强大和复杂的部分。directive可以扩展丰富html的行为。

举个例子，如果我们想让html某元素在屏幕上居中显示，我们无需知道屏幕窗口实际的宽度，只需加上align="center"属性就能达到目的。

这是html提供给我们好的接口行为。但是如果想要元素在屏幕的1/3位置显示，这就有些困难了。因为html并没有提供给我们这种语法。

我们可以通过directive定义一些新的行为，然后让Angular提供的HTML compiler(编译器)去解析并编译行为。更进一步，当我们开发应用系统，我们甚至可以为该应用创建特定的directive。

即Domain Specific Language 领域特定语言。

使用指令可以增强复用性。节省很多代码。

定义指令可以使用下面的写法模板

var myModule = angular.module(...);

myModule.directive('directiveName', function factory(injectables) {

  var directiveDefinitionObject = {

    priority: 0,

    template: '<div></div>',

    templateUrl: 'directive.html',

    replace: false,

    transclude: false,

    restrict: 'A',

    scope: false,

    compile: function compile(tElement, tAttrs, transclude) {

      return {

        pre: function preLink(scope, iElement, iAttrs, controller) { ... },

        post: function postLink(scope, iElement, iAttrs, controller) { ... }

      }

    },

    link: function postLink(scope, iElement, iAttrs) { ... }

  };

  return directiveDefinitionObject;

});

由上可知，定义指令，需要返回一个对象。对象中包含很多属性如restrict，replace等。下面根据例子介绍每个属性的用法。

例1

See the Pen 1. basic by finley (@mafeifan) on CodePen.

如下有两个指令，分别是元素类型和属性类型。

<my-directive><a href="http://google.com">Click me to go to Google</a></my-directive>

<p my-directive=""><a href="http://google.com">Click me to go to Google</a></p>

生成的html都是超链接。

参数restrict：个人理解指令的使用方式。可选值 EACM。分别代表 element，attribute，class和comment。

E 元素方式 <my-directive></my-directive>
A 属性方式 <div my-directive="exp"> </div>
C 类方式 <div class="my-directive: exp;"></div>
M 注释方式

参数template：要替换的内容。

参数templateUrl：从指定的url读模版内容，如果内容很长或者需要复用就用这个参数吧。比如我们可以写成

templateUrl : "../myTemplate.html"

// 或者动态获取

templateUrl: function(element, attrs) {

    return attrs.templateUrl || '../../uib/template/alert/alert.html';

},

参数replace：是否使用模板内容替换掉整个节点， true 替换整个节点， false 替换节点内容。如例1，若replace为true。则生成的html结构如下：

<a href="http://google.com">Click me to go to Google</a>

<a href="http://google.com" my-directive="">Click me to go to Google</a>

参数link：

例2 link方法

See the Pen Directive/2 link by finley (@mafeifan) on CodePen.

参数scope：绑定策略

参数compile和 link。分别代表编译和链接。

例3 绑定

如下TestCtrl里div元素有4个属性。a,abc,xx,c

  <body ng-app="myApp">

      <div ng-controller="TestCtrl">

        <div a abc="here" xx="{{ a }}" c="ccc"></div>

      </div>

  </body>

angular.module('myApp',[])

.controller('TestCtrl', function($scope){

  $scope.a = '123';

  $scope.here = 'here ~~';

})

.directive('a', function(){

  var func = function(element, attrs, link){

    return function(scope){

      /** 输出结果

        a: "here"

        b: "123"

        c: "ccc"

        d: "ccc"

        e: "here ~~

       */

      console.log(scope);

    };

  };

  return {

    restrict: 'A',

    compile: func,

// a 找到属性名为abc，其值为here
// b 找到属性名为xx，其值为{{a}} 接着找$scope.a 存在，其值为 123
// c @attrName 没有写attrName, 默认取自己的值,等价于@c ,找到属性c，其值为ccc
// d 如上
// e '=abc' 把属性abc的值当作scope的属性名。这里存在属性abc，其值为here。存在$scope.here。最终值为'here ~~'
// 若改为abc={{ here }} 效果跟 b: '@xx'一样

    scope: {a: '@abc', b: '@xx', c: '@', d: '@c', e: '=abc'}

  };

});

例4 transclude

See the Pen NG Directive学习4 transclude by finley (@mafeifan) on CodePen.