我們如何在動態插入的輸入上設置遮罩？

Question

由於Angular-UI-Mask行為 異常 ，因此我對某些輸入使用了jquery-inputmask ，但是當輸入被動態插入ny Angular時，它沒有任何掩碼：

<li ng-repeat="item in items">
    <input type="text" name="birth_date" class="span2 format_date" ng-model="birth_date" placeholder="Data de Nascimento" required />
</li>

這是相關的腳本

<script type="text/javascript">
    jQuery(document).ready(function(){
        $(".format_date").inputmask("99/99/9999");
    });
</script>

有什么我可以強制將掩碼設置為新輸入的方法嗎？

Answer 1

jQuery.inputMask之類的jQuery插件（如您的代碼所示）通過在文檔“就緒”時將行為附加到DOM元素上來工作。 這將運行一次，再也不會運行，因此對於動態添加的內容，此方法不起作用。

取而代之的是，您需要在相應的DOM更改時便會運行的東西。 因此，每當在“項目”列表中添加“項目”時，都會添加該元素，並對該元素運行相應的jQuery函數。 您需要為此使用AngularJS，並且可以編寫自己的指令，但是幸運的是，有人已經為您編寫了代碼： jQuery Passthrough插件作為Angular UI的 UI.Utils 的一部分。

這是一個正在工作的Plunkr 。

您需要在頂部包含腳本，就像這樣（我從GitHub下載了該腳本）：

<script src="ui-utils.jq.js"></script>

將模塊加載到AngularJS中，例如：

var app = angular.module('myApp', ['ui.jq']); 

然后在HTML標記中使用指令：

<input type="text" ui-jq="inputmask" ui-options="'99/99/9999', { 'placeholder': 'dd/mm/yyyy' }" />