在angular中使用第三方插件時(shí)最好都封裝到指令（directives）中去蒿柳，DOM操作也最好都解構(gòu)到指令中。
避免使用 jQuery 來操作 DOM，包括增加元素節(jié)點(diǎn)胧瓜，移除元素節(jié)點(diǎn)，獲取元素內(nèi)容郑什，隱藏或顯示元素府喳。你應(yīng)該使用 directives 來實(shí)現(xiàn)這些動(dòng)作，有必要的話你還要編寫自己的 directives蘑拯。
如果你感到很難改變習(xí)慣钝满，那么考慮從你的網(wǎng)頁中移除 jQuery 吧。真的申窘，AngularJS 中的 $http 服務(wù)非常強(qiáng)大弯蚜，基本可以替代 jQuery 的 ajax 函數(shù)，而且 AngularJS 內(nèi)嵌了 jQLite —— 它內(nèi)部實(shí)現(xiàn)的一個(gè) jQuery 子集剃法，包含了常用的 jQuery DOM 操作方法碎捺，事件綁定等等。但這并不是說用了AngularJS 就不能用 jQuery 了贷洲。如果你的網(wǎng)頁有載入 jQuery 那么 AngularJS 會(huì)優(yōu)先采用你的 jQuery收厨，否則它會(huì) fall back 到 jQLite。
需要自己編寫 directives 的情況通常是當(dāng)你使用了第三方的 jQuery 插件优构。因?yàn)椴寮?AngularJS 之外對(duì)表單值進(jìn)行更改诵叁，并不能即時(shí)反應(yīng)到 Model 中。例如我們用得比較多的 jQueryUI datepicker 插件钦椭，當(dāng)你選中一個(gè)日期后拧额，插件會(huì)將日期字符串填到 input 輸入框中。View 改變了玉凯，卻并沒有更新 Model势腮，因?yàn)?$('.datepicker').datepicker(); 這段代碼不屬于 AngularJS 的管理范圍。我們需要編寫一個(gè)directive 來讓 DOM 的改變即時(shí)更新到 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 中引入這個(gè) direcitve
<input type="text" datepicker ng-model="myObject.myDateValue" />
說白了 directive 就是在 HTML 里寫自定義的標(biāo)簽屬性捎拯，達(dá)到插件的作用。這種聲明式的語法擴(kuò)展了 HTML。
需要說明的是署照，有一個(gè) AngularUI 項(xiàng)目提供了大量的 directive 給我們使用祸泪，包括 Bootstrap 框架中的插件以及基于 jQuery 的其他很熱門的 UI 組件。還有http://www.ngnice.com 社區(qū)貢獻(xiàn)的ngshowcase建芙。 AngularJS 的社區(qū)很活躍没隘，生態(tài)系統(tǒng)健全。
注：這篇文章是我復(fù)制過來的禁荸，本想轉(zhuǎn)載右蒲，可是轉(zhuǎn)載不到簡書上面，抱歉赶熟！原文來自：http://blog.csdn.net/yy374864125/article/details/39289123
