控制angularjs的directive在DOM渲染完成后執行

scq000 發布于2019-08-19 17:20 / 2963人閱讀

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

問題

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

解決方案

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

核心代碼

具體代碼見 codepen

directive的link函數如下：

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中打出的日志條數和scope中的數組長度是一樣的，說明dom結構已經渲染好了，但是數據沒有綁定好，因此format沒有生效。
加上timer后，format才能生效。

GPU云服務器云服務器 DOM渲染數據angularjs控制臺完成后安裝完成后

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

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

控制angularjs的directive在DOM渲染完成后執行

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

microcosm1994 2019-08-01 14:59 評論0 收藏0
AngularJs功能（六）--指令

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

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

摘要：注意我使用了，后執行，我發現直接使用還是會找不到，原因不明，期待大神解答。某個項目，我的網頁中有一個列表元素，樣式如下： 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用法詳解

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

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

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

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