控制angularjs的directive在DOM渲染完成后執(zhí)行

microcosm1994 發(fā)布于2019-08-01 14:59 / 2440人閱讀

摘要：?jiǎn)栴}創(chuàng)建一個(gè)名叫的，在函數(shù)中對(duì)數(shù)據(jù)進(jìn)行格式化。但是函數(shù)執(zhí)行時(shí)，綁定的數(shù)據(jù)還沒(méi)有生效，依然是模板形式，如這種。這樣操作就必定位于數(shù)據(jù)綁定事件之后。加上后，才能生效。

問(wèn)題

創(chuàng)建一個(gè)名叫format的directive，在link函數(shù)中對(duì)數(shù)據(jù)進(jìn)行格式化。數(shù)據(jù)是通過(guò)data-binding從scope傳過(guò)來(lái)的。
但是link函數(shù)執(zhí)行時(shí)，綁定的數(shù)據(jù)還沒(méi)有生效，依然是模板形式，如{{f.name}}這種。如果需要在數(shù)據(jù)綁定后再執(zhí)行directive，該怎么辦？

解決方案

link函數(shù)執(zhí)行時(shí)，數(shù)據(jù)綁定的相關(guān)事件已經(jīng)存放在隊(duì)列中了，因此把format操作放到timeout函數(shù)中即可。這樣format操作就必定位于數(shù)據(jù)綁定事件之后。

核心代碼

具體代碼見(jiàn) codepen

directive的link函數(shù)如下：

directive("format", ["$timeout", function(timer) {
    return {
      link: function($scope, elem, attr) {
        timer(function() {
          var val = elem.text();
          console.log(val);
          var val = parseFloat(val);
          if (val !== val) {
            return
          }
          elem.text(val.toFixed(3));
        }, 0);
      },
      restrict: "A",
    }
  }]);

可以嘗試去掉timer看看效果，此時(shí)console中打出的日志條數(shù)和scope中的數(shù)組長(zhǎng)度是一樣的，說(shuō)明dom結(jié)構(gòu)已經(jīng)渲染好了，但是數(shù)據(jù)沒(méi)有綁定好，因此format沒(méi)有生效。
加上timer后，format才能生效。

云服務(wù)器 GPU云服務(wù)器 DOM渲染數(shù)據(jù)angularjs控制臺(tái) 完成后安裝完成后

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49692.html

相關(guān)文章

控制angularjs的directive在DOM渲染完成后執(zhí)行

摘要：?jiǎn)栴}創(chuàng)建一個(gè)名叫的，在函數(shù)中對(duì)數(shù)據(jù)進(jìn)行格式化。但是函數(shù)執(zhí)行時(shí)，綁定的數(shù)據(jù)還沒(méi)有生效，依然是模板形式，如這種。這樣操作就必定位于數(shù)據(jù)綁定事件之后。加上后，才能生效。問(wèn)題創(chuàng)建一個(gè)名叫format的directive，在link函數(shù)中對(duì)數(shù)據(jù)進(jìn)行格式化。數(shù)據(jù)是通過(guò)data-binding從scope傳過(guò)來(lái)的。但是link函數(shù)執(zhí)行時(shí)，綁定的數(shù)據(jù)還沒(méi)有生效，依然是模板形式，如{{f.name}...

scq000 2019-08-19 17:20 評(píng)論0 收藏0
AngularJs功能（六）--指令

摘要：事件只針對(duì)輸入框值的真實(shí)修改，而不是通過(guò)來(lái)修改。指令將給定表達(dá)式的值替換元素的內(nèi)容。指令還有另外一種轉(zhuǎn)換方式，如果你有字符串?dāng)?shù)組希望在輸入框中顯示，你可以在上使用指令。指令 Directive 指令系統(tǒng)（Directive）是Angular應(yīng)用的一個(gè)重要特性。是通過(guò)對(duì)DOM元素的標(biāo)簽丶屬性來(lái)增強(qiáng)HTML表現(xiàn)力，為其增加一些特定功能。本篇參考文檔Angular菜鳥(niǎo)教程內(nèi)置指令這里...

Mertens 2019-08-22 13:59 評(píng)論0 收藏0
AngularJS監(jiān)聽(tīng)ng-repeat渲染完成

摘要：注意我使用了，后執(zhí)行，我發(fā)現(xiàn)直接使用還是會(huì)找不到，原因不明，期待大神解答。某個(gè)項(xiàng)目，我的網(wǎng)頁(yè)中有一個(gè)列表元素，樣式如下： showImg(https://segmentfault.com/img/bV53Si?w=155&h=230); 實(shí)際上它是通過(guò)Angular的ng-repeat形成的，html中的代碼是： {{ list.name }} 圖中下方的新建清單button，點(diǎn)擊之...

tianren124 2019-08-26 11:49 評(píng)論0 收藏0
angularJS directive用法詳解

摘要：可選參數(shù)，布爾值或者對(duì)象默認(rèn)值為，可能取值默認(rèn)值。布爾值或者字符，默認(rèn)值為這個(gè)配置選項(xiàng)可以讓我們提取包含在指令那個(gè)元素里面的內(nèi)容，再將它放置在指令模板的特定位置。前言最近學(xué)習(xí)了下angularjs指令的相關(guān)知識(shí)，也參考了前人的一些文章，在此總結(jié)下。歡迎批評(píng)指出錯(cuò)誤的地方。 Angularjs指令定義的API showImg(https://segmentfault.com/img...

hlcc 2019-08-20 11:09 評(píng)論0 收藏0
理解和學(xué)習(xí)AngularJS（一）

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

EastWoodYang 2019-08-22 10:58 評(píng)論0 收藏0