angular 中的 DOM 操作

2021-06-25 16:26:09 字數 1313 閱讀 7490

在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 裡。

vardirectives

=angular

.module

('directives',);

directives

.directive

('datepicker'

,function

()});

}});

然後在 html 中引入這個 direcitve

<

input type

="text"

datepicker ng

-model

="myobject.mydatevalue"

/>

說白了 directive 就是在 html 裡寫自定義的標籤屬性,達到外掛程式的作用。這種宣告式的語法擴充套件了 html。

需要說明的是,有乙個 angularui 專案提供了大量的 directive 給我們使用,包括 bootstrap 框架中的外掛程式以及基於 jquery 的其他很熱門的 ui 元件。還有 社群貢獻的ngshowcase。 angularjs 的社群很活躍,生態系統健全。

angular 獲取 DOM 元素

viewchild配合local template variable 原生元素可以通過local variable獲取。在寫元件時,我們可以直接在元件模版裡給這個 input 標籤加標記 譬如 myinput 然後把標記傳給 viewchild用來獲取該元素。當元件初始化後,你就可以通過 rende...

angular中如何監控dom渲染完畢

剛剛看到群上乙個人說,他們公司凡是用angular和jquery外掛程式一起用的人,都被解雇了,沒看到這句話之前我很慚愧的說我有這樣用過,其實angular的生態系統那麼完善,完全可以不用去操作任何的dom元素都可以滿足你的提倡開發需求。那麼如果真的需要用某個jquery外掛程式,自己懶得封裝ang...

jQuery中的DOM操作

三 jquery中的dom操作 3.2.1 查詢節點 1.查詢元素節點 var li ul li eq 1 獲取裡第2個節點 var li text li.text 獲取第二個元素節點的文字內容 2.查詢屬性節點 var para p 獲取節點 var p text para.attr title ...