AngularJS中的DOM操作用法分析_AngularJS

本文執行個體講述了AngularJS中的DOM操作用法。分享給大家供大家參考，具體如下：

在angular中使用第三方外掛程式時最好都封裝到指令（directives）中去，DOM操作也最好都解構到指令中。

避免使用 jQuery 來操作 DOM，包括增加元素節點，移除元素節點，擷取元素內容，隱藏或顯示元素。你應該使用 directives 來實現這些動作，有必要的話你還要編寫自己的 directives。

如果你感到很難改變習慣，那麼考慮從你的網頁中移除 jQuery 吧。真的，AngularJS 中的 $http 服務非常強大，基本可以替代 jQuery 的 ajax 函數，而且 AngularJS 內嵌了 jQLite —— 它內部實現的一個 jQuery 子集，包含了常用的 jQuery DOM 操作方法，事件綁定等等。但這並不是說用了AngularJS 就不能用 jQuery 了。如果你的網頁有載入 jQuery 那麼 AngularJS 會優先採用你的 jQuery，否則它會 fall back 到 jQLite。

需要自己編寫 directives 的情況通常是當你使用了第三方的 jQuery 外掛程式。因為外掛程式在 AngularJS 之外對錶單值變更，並不能即時反應到 Model 中。例如我們用得比較多的 jQueryUI datepicker 外掛程式，當你選中一個日期後，外掛程式會將日期文字填到 input 輸入框中。View 改變了，卻並沒有更新 Model，因為 $('.datepicker').datepicker(); 這段代碼不屬於 AngularJS 的管理範圍。我們需要編寫一個directive 來讓 DOM 的改變即時更新到 Model 裡。

var directives = angular.module('directives', []);directives.directive('datepicker', function() {  return function(scope, element, attrs) {    element.datepicker({      inline: true,      dateFormat: 'dd.mm.yy',      onSelect: function(dateText) {        var modelPath = $(this).attr('ng-model');        putObject(modelPath, scope, dateText);        scope.$apply();      }    });  }});

然後在 HTML 中引入這個 direcitve

<input type="text" datepicker ng-model="myObject.myDateValue" />

說白了 directive 就是在 HTML 裡寫自訂的標籤屬性，達到外掛程式的作用。這種聲明式的文法擴充了 HTML。

需要說明的是，有一個 AngularUI 項目提供了大量的 directive 給我們使用，包括 Bootstrap 架構中的外掛程式以及基於 jQuery 的其他很熱門的 UI 組件。還有http://www.ngnice.com 社區貢獻的ngshowcase。 AngularJS 的社區很活躍，生態系統健全。

希望本文所述對大家AngularJS程式設計有所協助。