首頁 > web前端 > js教程 > AngularJS監聽ng-repeat渲染是否完成?這裡有問題的過程詳情

AngularJS監聽ng-repeat渲染是否完成?這裡有問題的過程詳情

寻∝梦
發布: 2018-09-07 16:57:44
原創
1138 人瀏覽過

本篇文章為介紹一個問題的,當然可能解決一些問題,介紹的是angularjs監聽ng-repeat渲染完成的實例,有興趣的朋友的可以一起來看看。

某個項目,我的網頁中有一個清單<ul></ul>元素,樣式如下:

AngularJS監聽ng-repeat渲染是否完成?這裡有問題的過程詳情

其實它是透過Angular的ng-repeat形成的,html中的程式碼是:

登入後複製
<li>{{ list.name }}

圖中下方的新建清單button,點擊之後就往lists數組中push了一個新的list對象,此時頁面會自動渲染,也對應增加一個<li>,如下:

AngularJS監聽ng-repeat渲染是否完成?這裡有問題的過程詳情

#注意MyList1一直是active狀態的(class="active"),我的需求是新增list後,新增的list設定為active,也就是在新增後就變成下面這種樣式:

AngularJS監聽ng-repeat渲染是否完成?這裡有問題的過程詳情

剛開始我嘗試在​​button對應的函數中,往lists陣列中push了新的list物件後,使用document .getElementById取得到新增的<li>對象,然後為其新增一個class="active",結果發現取得到的DOM物件為null,經過搜尋發現原因是:lists陣列push物件後,陣列發生改變,所有的都會重新渲染,在push完成之後馬上去找新增的DOM對象,DOM還沒渲染好,因此是取得不到的。 解法是:使用AngularJS的指令去監聽ng-repeat是否渲染完成,在渲染完成後,再去取新增的物件,(想看更多就到PHP中文網AngularJS開發手冊中學習)這個網路上有很多相關的內容了,程式碼如下:

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);
            }
        }
    }
});
登入後複製

上述程式碼建立了一個名為repeatFinish的指令,restrict: "C"表示指令放在DOMclass中(駝峰形式,即class="repeat-finish"),scope.$last === true表示已經渲染到了最後一個對象,此時執行change_list函數(定義在控制器中,功能是把目前active的物件取消active,然後設定傳入的DOM物件為active),element[0]可以直接取到目前渲染的DOM元素。 注意我使用了$timeout10ms後執行change_list,我發現直接使用change_list還是會找不到DOM,原因不明。會有大神來解答嗎?

這篇文章到這就結束了(想看更多就到PHP中文網AngularJS使用手冊中學習),有問題的可以在下方留言提問。

#

以上是AngularJS監聽ng-repeat渲染是否完成?這裡有問題的過程詳情的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板