亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

AngularJS監(jiān)聽ng-repeat渲染完成

tianren124 / 2570人閱讀

摘要：注意我使用了，后執(zhí)行，我發(fā)現(xiàn)直接使用還是會找不到，原因不明，期待大神解答。

某個項目，我的網(wǎng)頁中有一個列表

    元素，樣式如下：

    實際上它是通過Angular的ng-repeat形成的，html中的代碼是：

  • {{ list.name }}

    • 圖中下方的新建清單button，點擊之后就往lists數(shù)組中push了一個新的list對象，此時頁面會自動渲染，也對應(yīng)增加一個

  • ，如下：

    注意MyList1一直是active狀態(tài)的(class="active")，我的需求是新增list后，把新增的list設(shè)置為active，即在新增后就變成下面這種樣式：

    剛開始我嘗試在button對應(yīng)的函數(shù)中，往lists數(shù)組中push了新的list對象后，使用document.getElementById獲取到新增的

  • 對象，然后為其添加一個class="active"，結(jié)果發(fā)現(xiàn)獲取到的DOM對象為null，經(jīng)過搜索發(fā)現(xiàn)原因是：往lists數(shù)組push對象后，數(shù)組發(fā)生改變，所有的
  • 都會重新渲染，在push完成之后馬上去找新增的DOM對象，DOM還沒渲染好，因此是獲取不到的。解法是：使用AngularJS的指令去監(jiān)聽ng-repeat是否渲染完成，在渲染完成后，再去取新增的
  • 對象，這個網(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);
            }
        }
    }
});

    上述代碼建立了一個名為repeatFinish的指令，restrict: "C"表示指令放在DOM的class中（駝峰形式，即class="repeat-finish"），scope.$last === true表示已經(jīng)渲染到了最后一個對象，此時執(zhí)行change_list函數(shù)（定義在控制器中，功能是把當前active的對象取消active，然后設(shè)置傳入的DOM對象為active），element[0]可以直接取到當前渲染的DOM元素。注意我使用了$timeout，10ms后執(zhí)行change_list，我發(fā)現(xiàn)直接使用change_list還是會找不到DOM，原因不明，期待大神解答。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/107634.html

相關(guān)文章

  • 【譯】《精通使用AngularJS開發(fā)Web App》（三）--- 深入scope，繼承結(jié)構(gòu)，事件系

    摘要：比如，我們可以監(jiān)聽事件由實例發(fā)出，然后在任何瀏覽器中就是變化的時候都會得到通知，如下所示每一個作用域?qū)ο蠖紩羞@個方法，可以用來注冊一個作用域事件的偵聽器。這個函數(shù)所扮演的偵聽器在被調(diào)用時會有一個對象作為第一個參數(shù)。 上一篇：【譯】《精通使用AngularJS開發(fā)Web App》（二） 下一篇：【譯】《精通使用AngularJS開發(fā)Web App》（四） 書名：Mastering W...

    wind5o 評論0 收藏0

  • 你的第一個AngularJS應(yīng)用

    摘要：從最重要的頁面開始吧錦標賽的表格。重啟你的應(yīng)用，看看搜索框。然后我們加入兩個路由一個轉(zhuǎn)向錦標賽表格，另一個轉(zhuǎn)向車手詳情。你所需要做的只是創(chuàng)建一個名為的文件，然后將錦標賽表格放在那里。結(jié)論我們已經(jīng)介紹了開發(fā)一個簡單應(yīng)用所需的一切。 AngularJS是Google開源出來的一款 Javascript MVC 框架。利用AngularJS，你可以構(gòu)建結(jié)構(gòu)清晰、便于測試和維護的前端應(yīng)用。 ...

    shadajin 評論0 收藏0

  • 理解和學(xué)習(xí)AngularJS（一）

    摘要：為指令賦值函數(shù)名，即可運行。它也是一個對象，指向應(yīng)用程序作用域內(nèi)的所有元素和執(zhí)行上下文。簡而言之，是與指令元素相關(guān)聯(lián)的當前作用域，可以理解為視圖和控制器間的一個通道。它們被組織為模塊形式，之后可以被另一個引用。 Angularjs Angular是一款主旋律的MVVM框架，框架和傳統(tǒng)的庫不同： 類庫是一些函數(shù)的集合，它能幫助你寫WEB應(yīng)用。起主導(dǎo)作用的是你的代碼，由你來決定何時使用類...

    EastWoodYang 評論0 收藏0

  • AngularJS學(xué)習(xí)筆記(2) --- 指令參數(shù)和scope綁定策略

    摘要：引言指令可以說是的核心，而其開發(fā)也是比較困難的，本文主要介紹指令的一些參數(shù)和的綁定策略。指令執(zhí)行的優(yōu)先級，用于多個指令同時作用于同一個元素時。改變父會影響指令，而改變指令不會影響父。在父和指令之間建立雙向綁定。 引言 指令(Directive)可以說是 AngularJS 的核心，而其開發(fā)也是比較困難的，本文主要介紹指令的一些參數(shù)和scope的綁定策略。 參數(shù) 從 AngularJS ...

    AndroidTraveler 評論0 收藏0

  • 關(guān)于angularJs 遇到的小坑

    摘要：最近做一個項目，應(yīng)該來說比較簡單的輸入框驗證地址而已，允許空值首先是對地址進行檢驗匹配是否正確，開始我在指令中是這樣寫的。 最近做一個項目，應(yīng)該來說比較簡單的輸入框驗證ip地址而已，允許空值 showImg(https://segmentfault.com/img/bVKrfs?w=294&h=75); 首先是對ip地址進行檢驗匹配是否正確，開始我在指令中是這樣寫的。我輸入空格后會提示...

    RaoMeng 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<