<del id="o2yae"></del>

<strike id="o2yae"></strike>

<tfoot id="o2yae"></tfoot>

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

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

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

問題

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

解決方案

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

核心代碼

具體代碼見 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看看效果，此時console中打出的日志條數(shù)和scope中的數(shù)組長度是一樣的，說明dom結構已經(jīng)渲染好了，但是數(shù)據(jù)沒有綁定好，因此format沒有生效。
加上timer后，format才能生效。

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/49692.html

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

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

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

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

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

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

tianren124 2019-08-26 11:49 評論0 收藏0
angularJS directive用法詳解

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

hlcc 2019-08-20 11:09 評論0 收藏0
理解和學習AngularJS（一）

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

EastWoodYang 2019-08-22 10:58 評論0 收藏0