AngularJS監(jiān)聽(tīng)ng-repeat渲染完成的方法
某個(gè)項(xiàng)目,我的網(wǎng)頁(yè)中有一個(gè)列表<ul>
元素,樣式如下:
實(shí)際上它是通過(guò)Angular
的ng-repeat
形成的,html
中的代碼是:
<li ng-repeat="for list in lists()" id="{{ list.id }}">{{ list.name }}</li>
圖中下方的新建清單button
,點(diǎn)擊之后就往lists
數(shù)組中push
了一個(gè)新的list
對(duì)象,此時(shí)頁(yè)面會(huì)自動(dòng)渲染,也對(duì)應(yīng)增加一個(gè)<li>
,如下:
注意MyList1
一直是active
狀態(tài)的(class="active"
),我的需求是新增list
后,把新增的list
設(shè)置為active
,即在新增后就變成下面這種樣式:
剛開(kāi)始我嘗試在button
對(duì)應(yīng)的函數(shù)中,往lists
數(shù)組中push
了新的list
對(duì)象后,使用document.getElementById
獲取到新增的<li>
對(duì)象,然后為其添加一個(gè)class="active"
,結(jié)果發(fā)現(xiàn)獲取到的DOM
對(duì)象為null
,經(jīng)過(guò)搜索發(fā)現(xiàn)原因是:往lists
數(shù)組push
對(duì)象后,數(shù)組發(fā)生改變,所有的<li>
都會(huì)重新渲染,在push
完成之后馬上去找新增的DOM
對(duì)象,DOM
還沒(méi)渲染好,因此是獲取不到的。解法是:使用AngularJS
的指令去監(jiān)聽(tīng)ng-repeat
是否渲染完成,在渲染完成后,再去取新增的<li>
對(duì)象,這個(gè)網(wǎng)上有很多相關(guān)的內(nèi)容了,代碼如下:
myapp.directive('repeatFinish', function ($timeout) { return { restrict: "C", link: function (scope, element, attr) { if(scope.$last === true){ $timeout(function () { scope.change_list(element[0]); }, 10); } } } });
上述代碼建立了一個(gè)名為repeatFinish
的指令,restrict: "C"
表示指令放在DOM
的class
中(駝峰形式,即class="repeat-finish"
),scope.$last === true
表示已經(jīng)渲染到了最后一個(gè)對(duì)象,此時(shí)執(zhí)行change_list
函數(shù)(定義在控制器中,功能是把當(dāng)前active
的對(duì)象取消active
,然后設(shè)置傳入的DOM
對(duì)象為active
),element[0]
可以直接取到當(dāng)前渲染的DOM
元素。注意我使用了$timeout
,10ms
后執(zhí)行change_list
,我發(fā)現(xiàn)直接使用change_list
還是會(huì)找不到DOM
,原因不明,期待大神解答。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
如何在Angular8.0下使用ngx-translate進(jìn)行國(guó)際化配置
這篇文章主要介紹了如何在Angular8.0下使用ngx-translate進(jìn)行國(guó)際化配置,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07Angular?Component屬性綁定target和attr.target的區(qū)別分析
這篇文章主要介紹了Angular?Component屬性綁定target和attr.target的區(qū)別分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07AngularJs Dependency Injection(DI,依賴(lài)注入)
本文主要介紹AngularJs Dependency Injection,這里整理了詳細(xì)資料及示例代碼有興趣的小伙伴可以參考下2016-09-09AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法
這篇文章主要介紹了AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了AngularJS自定義指令實(shí)現(xiàn)復(fù)制功能的相關(guān)操作技巧,需要的朋友可以參考下2017-05-05Angular 5.x 學(xué)習(xí)筆記之Router(路由)應(yīng)用
本篇文章主要介紹了Angular 5.x 學(xué)習(xí)筆記之Router(路由)應(yīng)用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04