本文實(shí)例講述了AngularJS封裝指令方法。分享給大家供大家參考，具體如下：

引言：angularjs是一個(gè)中等重量級(jí)的前端開(kāi)發(fā)框架

HTML是一門很好的為靜態(tài)文本設(shè)計(jì)的語(yǔ)言，但要構(gòu)建動(dòng)態(tài)的web應(yīng)用它就顯的乏力了。通常，我們使用以下技術(shù)來(lái)解決靜態(tài)網(wǎng)頁(yè)技術(shù)在構(gòu)建動(dòng)態(tài)應(yīng)用上的不足：

1.類庫(kù)：類庫(kù)是一類函數(shù)的集合，它能幫助你寫(xiě)web應(yīng)用。這里起主導(dǎo)作用是你的代碼，由你來(lái)決定何時(shí)使用類庫(kù)。典型的類庫(kù)，例如prototype、jQuery等。

2.框架：框架式一種特殊的、已經(jīng)實(shí)現(xiàn)的web應(yīng)用，你只需要填充具體的業(yè)務(wù)邏輯。這里框架是起主導(dǎo)作用的，由它根據(jù)具體的邏輯來(lái)調(diào)用你的代碼。典型的框架例如knockout,sproutcore, YUI等。AngularJS也是其中之一。

框架又有輕重之分。我對(duì)輕重的判斷標(biāo)準(zhǔn)是，是否需要很多的第三方類庫(kù)來(lái)幫助你實(shí)現(xiàn)功能。顯然，backbone這種屬于輕量級(jí)框架，它簡(jiǎn)單易用，專注于前端Mvc的實(shí)現(xiàn)，故而你還需要很多第三方類庫(kù)（至少jquery）來(lái)完成dom操作、UI等各種各樣的內(nèi)容。Yui、dojo屬于重型框架，他們的作者企圖搞出一個(gè)森羅萬(wàn)象的框架+組件庫(kù)，包括代碼動(dòng)態(tài)調(diào)用、各種UI組件都包含在內(nèi)，學(xué)習(xí)成本較高，但是一旦精通，至少這個(gè)項(xiàng)目別無(wú)所求。從這個(gè)角度講，輕量級(jí)框架好比毛坯房，還需要各種工具做裝修，但是對(duì)于開(kāi)發(fā)者來(lái)說(shuō)也更靈活。重量級(jí)框架好比精裝修的房間，你只需要的是適應(yīng)它，但如果要自己做出大刀闊斧的修改，那就稍微有點(diǎn)傷經(jīng)動(dòng)骨了。

angularjs，在我看來(lái)是介于以上兩類之間，是個(gè)中等重量級(jí)的框架。即不像backbone那么簡(jiǎn)單，也不像dojo和Yui那么包羅萬(wàn)象。很多時(shí)候，妄圖包羅萬(wàn)象，往往會(huì)出現(xiàn)很多子模塊的質(zhì)量高不成低不就，并且修改起來(lái)較為困難。過(guò)分精簡(jiǎn)，則框架內(nèi)容單薄需要寫(xiě)的內(nèi)容太多。angularjs這種相對(duì)中庸的風(fēng)格，則非常符合我的需求。目前，AngularJS三個(gè)我認(rèn)為最為精妙的組件就是數(shù)據(jù)綁定（Scope），指令（Directive）和依賴注入（Dependency Injection），表現(xiàn)得非常好。相對(duì)而言，它的UI組件和動(dòng)畫(huà)則是弱項(xiàng)?？梢哉f(shuō)，選擇了angularjs，就意味著選擇了jquery式的組件庫(kù)方式來(lái)彌補(bǔ)它的不足，要完成一個(gè)web應(yīng)用必須跟第三方類庫(kù)打交道。

現(xiàn)在已經(jīng)有許多針對(duì)angularjs寫(xiě)的UI插件，有的是結(jié)合了bootstrap，有的是結(jié)合了jquery, 雖然不太完善，都很值得參考：http://angular-ui.github.io/

與jquery類庫(kù)的協(xié)作

第三方類庫(kù)中，不得不提的是大名鼎鼎的jquery,現(xiàn)在基本上已經(jīng)是國(guó)內(nèi)web開(kāi)發(fā)的必修工具了。它靈活的dom操作，讓很多web開(kāi)發(fā)人員欲罷不能。再加上已經(jīng)很成熟的jquery UI 庫(kù)和大量jquery 插件，幾乎是一個(gè)取之不盡用之不竭的寶庫(kù)。然而，它是否能與angularjs結(jié)合呢？

很多angularjs原教旨主義者對(duì)此持否定態(tài)度。他們認(rèn)為，既然已經(jīng)使用了angularjs做web應(yīng)用框架，那就必須避免其他類庫(kù)的干擾，做純凈的MvvM模式應(yīng)用。任何類似jquery的dom操作，都是不潔的。把所有和界面相關(guān)的, 比如dom操作, 都放在directive中, 這樣頁(yè)面中directive而沒(méi)有代碼，跟JSF思想一致。MVVM,DSL,組件化的思想這才是web的趨勢(shì)。嗯，想法很好，原教旨主義者想法都是這么純潔。但事實(shí)情況是，使用了angularjs我們就離不開(kāi)jquery。

眾所周知，angularjs里面事實(shí)上已經(jīng)內(nèi)置了jquery lite.，而且angularjs源碼中很多方法直接就是使用jquery方法。例如angularjs的事件綁定機(jī)制。既然先知們都在用，我們又何苦不用？組件化的思想沒(méi)有錯(cuò)，但沒(méi)必要因此把自己的手腳綁住。唯一要注意的問(wèn)題是，不要用jquery的代碼破壞了angularjs的結(jié)構(gòu)。對(duì)此我的原則如下，不足之處還請(qǐng)指出：

模塊劃分、服務(wù)、路由、依賴注入等重要方面上都得使用angularjs的方式，只有某些具體內(nèi)容（通常是一些Ui）才使用jquery。 避免在controller里面寫(xiě)了一堆直接操作dom元素的 jquery代碼。使用angularjs的模板綁定機(jī)制。 常用的組件要用angularjs的方法抽取出來(lái)，但組件具體實(shí)現(xiàn)則不必糾結(jié)于是否使用jquery及其插件。 .使用第三方類庫(kù)時(shí)，在變量和函數(shù)命名時(shí)有特殊標(biāo)記（通常是加上這個(gè)類庫(kù)名的縮寫(xiě)）。

jquery,更是建議作為angularjs的依賴，先于angularjs加載進(jìn)來(lái)。

事實(shí)上，選擇了angularjs這樣的框架中德中等重量級(jí)選手，就意味著你必須添加其他類庫(kù)。而jquery,更是建議作為angularjs的依賴，先于angularjs加載進(jìn)來(lái)。因?yàn)樵诓榭碼ngularjs API的時(shí)候，我已經(jīng)發(fā)現(xiàn)，其中許多功能，事實(shí)上是依賴于jquery的。典型的例子，就是官網(wǎng)的ng-blur指令。

<input type="text" ng-model="name" ng-blur="checkname()" > ng-blur指令，是在焦點(diǎn)離開(kāi)某個(gè)元素時(shí)觸發(fā)的指令。對(duì)于上例，即在焦點(diǎn)離開(kāi)該文本輸入框時(shí)，觸發(fā)checkname()函數(shù)。

看起來(lái)很簡(jiǎn)單，但是你如果真的使用了這個(gè)指令，你就會(huì)發(fā)現(xiàn)它根本不起效果。在仔細(xì)查看文檔后，我才發(fā)現(xiàn)這實(shí)際是先知們使用jquery的blur方法實(shí)現(xiàn)的函數(shù)（而且事實(shí)上根本沒(méi)有真正實(shí)現(xiàn)并放在當(dāng)前的版本里）。那么就算我們想寫(xiě)一個(gè)，離開(kāi)jquery原生庫(kù)是不行的,因?yàn)閎lur方法并未封裝到angularjs內(nèi)帶的jquery lite里。換句話說(shuō)，必須先載入完整的jquery才能使用。于是，我干脆自己寫(xiě)了一個(gè)標(biāo)簽：

/*
* angular directive onBlur
*
* @description my ng-blur
* @require jquery
*/
$compileProvider.directive('onBlur', function() {
  return {
    restrict : 'A',
    link : function(scope, elm, attrs) {
      elm.bind('blur', function() {
        scope.$apply(attrs.onBlur);
      });
    }
  };
});

這已經(jīng)很好了。

但是還不夠完美。由于$apply方法接受函數(shù)的問(wèn)題，所以直接像上面這樣寫(xiě)，有可能導(dǎo)致angularjs運(yùn)行時(shí)報(bào)錯(cuò)：$apply already in progress

避免這個(gè)問(wèn)題的發(fā)生，則需要對(duì)$apply方法進(jìn)行加工：

/* factory function safeApply
*
* @description If you find yourself triggering the '$apply already in progress' error while developing with Angular.JS
* (for me I find I hit most often when integrating third party plugins that trigger a lot of DOM events),
* you can use a 'safeApply' method that checks the current phase before executing your function.
*
* @param scope, the action scope, mostly is the topmost controller
* @param fn, the function which you want to apply into scope
* @see https://coderwall.com/p/ngisma
*/.factory('safeApply', function($rootScope) {
  return function(scope, fn) {
    var phase = scope.$root.$$phase;
    if (phase == '$apply' || phase == '$digest') {
      if (fn && ( typeof (fn) === 'function')) {
        fn();
      }
    } else {
      scope.$apply(fn);
    }
  }
});

那么之前的onblur標(biāo)簽，就應(yīng)該改為：

/*
* angular directive onBlur
*
* @description my ng-blur
* @require jquery
*/
$compileProvider.directive('onBlur', function(safeApply) {
  return {
    restrict : 'A',
    link : function(scope, elm, attrs) {
      elm.bind('blur', function() {
        safeApply(scope, attrs.onBlur);
      });
    }
  };
});

以上代碼我已經(jīng)加入了自己的angular_extend模塊，在自己的項(xiàng)目中使用了，效果很好。

將jquery 插件用angularjs的方式封裝成組件的例子

icheck是一個(gè)jquery插件，用于跨瀏覽器美化Checkbox和Radio按紐。關(guān)于它的介紹，在http://www.bootcss.com/p/icheck/

一般來(lái)說(shuō)，它的使用方法是在dom載入后加一段jquery代碼：

$('input').iCheck({
  labelHover : false,
  cursor : true,
  checkboxClass : 'icheckbox_square-blue',
  radioClass : 'iradio_square-blue',
  increaseArea : '20%'
});

但是既然要放在我們的項(xiàng)目里，就不能到處塞這種直接操作dom的jquery代碼，既不美觀，也不易維護(hù)。按照之前所說(shuō)的原則，最好將其封裝成angular指令的模式，放在公共模塊里來(lái)調(diào)用。這里我將我新建的指令命名為ng-icheck。如此，我們只要寫(xiě)在某個(gè)checkbox或者radio的html標(biāo)簽里加上一句ng-ickeck即可。具體實(shí)現(xiàn)如下：

/*
 * angular directive ng-icheck
 *
 * @description icheck is a plugin of jquery for beautifying checkbox & radio, now I complied it with angular directive
 * @require jquery, icheck
 * @example <input type="radio" ng-model="paomian" value="kangshifu" ng-icheck>
 *     <input type="checkbox" class="icheckbox" name="mantou" ng-model="mantou" ng-icheck checked>
 */
$compileProvider.directive('ngIcheck', function($compile) {
  return {
    restrict : 'A',
    require : '?ngModel',
    link : function($scope, $element, $attrs, $ngModel) {
      if (!$ngModel) {
        return;
      }
      //using iCheck
      $($element).iCheck({
        labelHover : false,
        cursor : true,
        checkboxClass : 'icheckbox_square-blue',
        radioClass : 'iradio_square-blue',
        increaseArea : '20%'
      }).on('ifClicked', function(event) {
        if ($attrs.type == "checkbox") {
          //checkbox, $ViewValue = true/false/undefined
          $scope.$apply(function() {
            $ngModel.$setViewValue(!($ngModel.$modelValue == undefined ? false : $ngModel.$modelValue));
          });
        } else {
          // radio, $ViewValue = $attrs.value
          $scope.$apply(function() {
            $ngModel.$setViewValue($attrs.value);
          });
        }
      });
    },
  };
});

在以上代碼中值得注意的是：使用了icheck插件后，會(huì)生成一個(gè)美化過(guò)的div覆蓋在原來(lái)的checkbox或者radio之上，而原來(lái)的checkbox或者radio會(huì)被影藏。故而，當(dāng)我們點(diǎn)擊它們時(shí)，不會(huì)直接觸發(fā)事件，使得綁定到checkbox或者radio上的model值改變。所以我們這里需要重新綁定事件，使用

$ngModel.$setViewValue() 方法來(lái)給model賦值。具體邏輯，則相根據(jù)checkbox和radio而不同。詳見(jiàn)以上代碼。

由于以上代碼寫(xiě)在我的項(xiàng)目中的通用模塊common_angular_component.js里，故而在調(diào)用了該通用模塊的頁(yè)面里，直接使用ng-icheck指令即可實(shí)現(xiàn)ickeck的美化效果，同時(shí)避免了大量重復(fù)的jquery代碼的出現(xiàn)。

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

最新評(píng)論