AngularJS 基本的自定義方法

自定義一個指令可以非常非常的復(fù)雜，但是其基本的調(diào)用形式，同自定義服務(wù)大概是相同的：

<p show style="font-size: 12px;"></p>

<script type="text/javascript">

var app = angular.module('Demo', [], angular.noop);

app.directive('show', function(){
  var func = function($scope, $element, $attrs){
    console.log($scope);
    console.log($element);
    console.log($attrs);
  }    
  return func;
  //return {compile: function(){return func}}
});

angular.bootstrap(document, ['Demo']);
</script>

如果在 directive 中直接返回一個函數(shù)，則這個函數(shù)會作為 compile 的返回值，也即是作為 link 函數(shù)使用。這里說的 compile 和 link 都是一個指令的組成部分，一個完整的定義應(yīng)該返回一個對象，這個對象包括了多個屬性：

• name
• priority
• terminal
• scope
• controller
• require
• restrict
• template
• templateUrl
• replace
• transclude
• compile
• link

上面的每一個屬性，都可以單獨探討的。

下面是一個完整的基本的指令定義例子：

<code lines>
//失去焦點使用 jQuery 的擴展支持冒泡
app.directive('ngBlur', function($parse){
  return function($scope, $element, $attr){
    var fn = $parse($attr['ngBlur']);
    $element.on('focusout', function(event){
      fn($scope, {$event: event});
    });
  }
});
</code>

<div code lines>
//失去焦點使用 jQuery 的擴展支持冒泡
app.directive('ngBlur', function($parse){
  return function($scope, $element, $attr){
    var fn = $parse($attr['ngBlur']);
    $element.on('focusout', function(event){
      fn($scope, {$event: event});
    });
  }
});
</div>

var app = angular.module('Demo', [], angular.noop);

app.directive('code', function(){
  var func = function($scope, $element, $attrs){

    var html = $element.text();
    var lines = html.split('\n');

    //處理首尾空白
    if(lines[0] == ''){lines = lines.slice(1, lines.length - 1)}
    if(lines[lines.length-1] == ''){lines = lines.slice(0, lines.length - 1)}

    $element.empty();

    //處理外框
    (function(){
      $element.css('clear', 'both');
      $element.css('display', 'block');
      $element.css('line-height', '20px');
      $element.css('height', '200px');
    })();

    //是否顯示行號的選項
    if('lines' in $attrs){
      //處理行號
      (function(){
        var div = $('<div style="width: %spx; background-color: gray;' +
                    'float: left; text-align: right; padding-right: 5px;' +
                    'margin-right: 10px;"></div>'
                    .replace('%s', String(lines.length).length * 10));
        var s = '';
        angular.forEach(lines, function(_, i){
          s += '<pre style="margin: 0;">%s</pre>\n'.replace('%s', i + 1);
        });
        div.html(s);
        $element.append(div);
      })();
    }

    //處理內(nèi)容
    (function(){
      var div = $('<div style="float: left;"></div>');
      var s = '';
      angular.forEach(lines, function(l){
        s += '<span style="margin: 0;">%s</span><br />\n'
             .replace('%s', l.replace(/\s/g, '<span>&nbsp;</span>'));
      });
      div.html(s);
      $element.append(div);
    })();
  }

  return {link: func,
          restrict: 'AE'}; //以元素或?qū)傩缘男问绞褂妹?});

angular.bootstrap(document, ['Demo']);

上面這個自定義的指令，做的事情就是解析節(jié)點中的文本內(nèi)容，然后修改它，再把生成的新內(nèi)容填充到節(jié)點當中去。其間還涉及了節(jié)點屬性值 lines 的處理。這算是指令中最簡單的一種形式。因為它是“一次性使用”，中間沒有變量的處理。比如如果節(jié)點原來的文本內(nèi)容是一個變量引用，類似于 {{ code }} ，那上面的代碼就不行了。這種情況麻煩得多。后面會討論。