Как установить маску на динамически вставленный вход?

Question

С Angular-UI-Mask is acting oddly, я использую jquery-inputmask некоторые из моих входов, но когда вход динамически вставленный пу Угловой он не получает маски:

<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, такие как jQuery.inputMask работают (как показывает ваш код), прикрепляют поведение к элементам DOM, когда документ «готов». Это будет работать один раз и никогда больше, поэтому для динамически добавленного контента этот подход не работает.

Вместо этого вам нужно что-то, что будет запускаться всякий раз, когда соответствующая DOM будет изменена. Поэтому всякий раз, когда «элемент» в вашем списке «items» добавляется, элемент добавляется, и соответствующая функция jQuery запускается против этого элемента. Для этого вам нужно использовать AngularJS, и вы можете написать свою собственную директиву, но, к счастью, кто-то уже написал для вас код: jQuery Passthrough plugin как часть Angular UI's UI.Utils.

Адрес working Plunkr.

Вам необходимо включить сценарий в верхней части, например, так (I downloaded it from 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' }" />