国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

AngularJS監聽ng-repeat渲染完成

tianren124 / 2466人閱讀

摘要：注意我使用了，后執行，我發現直接使用還是會找不到，原因不明，期待大神解答。

某個項目，我的網頁中有一個列表

    元素，樣式如下：

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

  • {{ list.name }}

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

  • ，如下：

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

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

  • 對象，然后為其添加一個class="active"，結果發現獲取到的DOM對象為null，經過搜索發現原因是：往lists數組push對象后，數組發生改變，所有的
  • 都會重新渲染，在push完成之后馬上去找新增的DOM對象，DOM還沒渲染好，因此是獲取不到的。解法是：使用AngularJS的指令去監聽ng-repeat是否渲染完成，在渲染完成后，再去取新增的
  • 對象，這個網上有很多相關的內容了，代碼如下：

    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表示已經渲染到了最后一個對象，此時執行change_list函數（定義在控制器中，功能是把當前active的對象取消active，然后設置傳入的DOM對象為active），element[0]可以直接取到當前渲染的DOM元素。注意我使用了$timeout，10ms后執行change_list，我發現直接使用change_list還是會找不到DOM，原因不明，期待大神解答。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107634.html

相關文章

  • 【譯】《精通使用AngularJS開發Web App》（三）--- 深入scope，繼承結構，事件系

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

    wind5o 評論0 收藏0

  • 你的第一個AngularJS應用

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

    shadajin 評論0 收藏0

  • 理解和學習AngularJS（一）

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

    EastWoodYang 評論0 收藏0

  • AngularJS學習筆記(2) --- 指令參數和scope綁定策略

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

    AndroidTraveler 評論0 收藏0

  • 關于angularJs 遇到的小坑

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

    RaoMeng 評論0 收藏0

發表評論

0條評論

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