AngularJS中的DOM操作用法分析
本文實(shí)例講述了AngularJS中的DOM操作用法。分享給大家供大家參考,具體如下:
在angular中使用第三方插件時(shí)最好都封裝到指令(directives)中去,DOM操作也最好都解構(gòu)到指令中。
避免使用 jQuery 來(lái)操作 DOM,包括增加元素節(jié)點(diǎn),移除元素節(jié)點(diǎn),獲取元素內(nèi)容,隱藏或顯示元素。你應(yīng)該使用 directives 來(lái)實(shí)現(xiàn)這些動(dòng)作,有必要的話你還要編寫(xiě)自己的 directives。
如果你感到很難改變習(xí)慣,那么考慮從你的網(wǎng)頁(yè)中移除 jQuery 吧。真的,AngularJS 中的 $http 服務(wù)非常強(qiáng)大,基本可以替代 jQuery 的 ajax 函數(shù),而且 AngularJS 內(nèi)嵌了 jQLite —— 它內(nèi)部實(shí)現(xiàn)的一個(gè) jQuery 子集,包含了常用的 jQuery DOM 操作方法,事件綁定等等。但這并不是說(shuō)用了AngularJS 就不能用 jQuery 了。如果你的網(wǎng)頁(yè)有載入 jQuery 那么 AngularJS 會(huì)優(yōu)先采用你的 jQuery,否則它會(huì) fall back 到 jQLite。
需要自己編寫(xiě) directives 的情況通常是當(dāng)你使用了第三方的 jQuery 插件。因?yàn)椴寮?AngularJS 之外對(duì)表單值進(jìn)行更改,并不能即時(shí)反應(yīng)到 Model 中。例如我們用得比較多的 jQueryUI datepicker 插件,當(dāng)你選中一個(gè)日期后,插件會(huì)將日期字符串填到 input 輸入框中。View 改變了,卻并沒(méi)有更新 Model,因?yàn)?$('.datepicker').datepicker(); 這段代碼不屬于 AngularJS 的管理范圍。我們需要編寫(xiě)一個(gè)directive 來(lái)讓 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" />
說(shuō)白了 directive 就是在 HTML 里寫(xiě)自定義的標(biāo)簽屬性,達(dá)到插件的作用。這種聲明式的語(yǔ)法擴(kuò)展了 HTML。
需要說(shuō)明的是,有一個(gè) AngularUI 項(xiàng)目提供了大量的 directive 給我們使用,包括 Bootstrap 框架中的插件以及基于 jQuery 的其他很熱門(mén)的 UI 組件。還有http://www.ngnice.com 社區(qū)貢獻(xiàn)的ngshowcase。 AngularJS 的社區(qū)很活躍,生態(tài)系統(tǒng)健全。
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
angularjs $http調(diào)用接口的方式詳解
今天小編就為大家分享一篇angularjs $http調(diào)用接口的方式詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08詳解angular用$sce服務(wù)來(lái)過(guò)濾HTML標(biāo)簽
這篇文章主要介紹了詳解angular用$sce服務(wù)來(lái)過(guò)濾HTML標(biāo)簽,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-04-04AngularJS ng-bind-html 指令詳解及實(shí)例代碼
本文主要是對(duì)AngularJS ng-bind-html 指令知識(shí)的詳細(xì)講解,并附代碼實(shí)例,有需要的小伙伴可以參考下2016-07-07詳解ionic本地相冊(cè)、拍照、裁剪、上傳(單圖完全版)
本篇文章主要介紹了ionic本地相冊(cè)、拍照、裁剪、上傳(單圖完全版),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10詳解Angular2表單-模板驅(qū)動(dòng)的表單(Template-Driven Forms)
本篇文章主要介紹了詳解Angular2表單-模板驅(qū)動(dòng)的表單(Template-Driven Forms),具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08angularjs select 賦值 ng-options配置方法
下面小編就為大家分享一篇angularjs select 賦值 ng-options配置方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02詳解在 Angular 項(xiàng)目中添加 clean-blog 模板
本篇文章主要介紹了詳解在 Angular 項(xiàng)目中添加 clean-blog 模板,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-07-07