欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS監(jiān)聽(tīng)ng-repeat渲染完成的方法

 更新時(shí)間:2018年03月20日 16:28:11   作者:Harpsichord1207  
這篇文章主要介紹了AngularJS監(jiān)聽(tīng)ng-repeat渲染完成的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

某個(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"表示指令放在DOMclass中(駝峰形式,即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ó)際化配置

    這篇文章主要介紹了如何在Angular8.0下使用ngx-translate進(jìn)行國(guó)際化配置,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • Angular?Component屬性綁定target和attr.target的區(qū)別分析

    Angular?Component屬性綁定target和attr.target的區(qū)別分析

    這篇文章主要介紹了Angular?Component屬性綁定target和attr.target的區(qū)別分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • AngularJS 入門(mén)教程之事件處理器詳解

    AngularJS 入門(mén)教程之事件處理器詳解

    本文主要介紹AngularJS 事件處理器,這里整理了相關(guān)資料和示例代碼,有需要的小伙伴可以參考下
    2016-08-08
  • Angularjs修改密碼的實(shí)例代碼

    Angularjs修改密碼的實(shí)例代碼

    這篇文章主要介紹了Angularjs修改密碼的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-05-05
  • AngularJs Dependency Injection(DI,依賴(lài)注入)

    AngularJs Dependency Injection(DI,依賴(lài)注入)

    本文主要介紹AngularJs Dependency Injection,這里整理了詳細(xì)資料及示例代碼有興趣的小伙伴可以參考下
    2016-09-09
  • 深入理解Angular中的依賴(lài)注入

    深入理解Angular中的依賴(lài)注入

    本篇文章主要介紹了深入理解Angular中的依賴(lài)注入,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法

    AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法

    這篇文章主要介紹了AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了AngularJS自定義指令實(shí)現(xiàn)復(fù)制功能的相關(guān)操作技巧,需要的朋友可以參考下
    2017-05-05
  • Angular 5.x 學(xué)習(xí)筆記之Router(路由)應(yīng)用

    Angular 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
  • 詳解angular中的作用域及繼承

    詳解angular中的作用域及繼承

    本篇文章主要介紹了詳解angular中的作用域及繼承,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-05-05
  • Angular2 組件交互實(shí)例詳解

    Angular2 組件交互實(shí)例詳解

    Angular2應(yīng)用程序?qū)嶋H上是有很多父子組價(jià)組成的組件樹(shù),因此,了解組件之間如何通信,特別是父子組件之間,對(duì)編寫(xiě)Angular2應(yīng)用程序具有十分重要的意義。下面通過(guò)本文給大家介紹Angular2 組件交互知識(shí),感興趣的朋友一起看看吧
    2017-08-08

最新評(píng)論