Событие загрузки шаблона ng-transclude, для подключения скрипта?

Question

[Seganapa]

Настраиваю модуль Angular-Wizard (https://github.com/mgonto/angular-wizard)

Он включает в себя директивы. С помощью них подгружается шаблон.
Модуль я применяю для создания много-шаговой формы. Все прекрасно работает.

Но единственный нюанс. При загрузке страницы, директивы wizard, подтягивают свой шаблон. Так как я использую его для создания форм, мне нужно подключить input mask.

<form id="s_add_agent_form" class="uk-form-stacked">
	<wizard on-finish="finishedWizard()" template="app/templates/wizard.tpl.html">
		<wz-step title="1" template="app/templates/wizard.step.tpl.html">
			<label for="user_phone1">Телефон</label>
			<input data-inputmask="'mask': '[phone]'" data-inputmask-showmaskonhover="false" type="text" class="masked_input md-input" name="user_phone1" id="user_phone1" md-input ng-model="s_user_data.step1.user_phone1" />
		</wz-step>
		<wz-step title="2" template="app/templates/wizard.step.tpl.html">
			<label for="user_phone2">Доп. телефон</label>
			<input data-inputmask="'mask': '[phone]'" data-inputmask-showmaskonhover="false" type="text" class="masked_input md-input" name="user_phone2" id="user_phone2" md-input ng-model="s_user_data.step1.user_phone2" />
		</wz-step>
		<wz-step title="3" template="app/templates/wizard.step.tpl.html">
			<label for="user_phone3">Доп. телефон</label>
			<input data-inputmask="'mask': '[phone]'" data-inputmask-showmaskonhover="false" type="text" class="masked_input md-input" name="user_phone3" id="user_phone3" md-input ng-model="s_user_data.step1.user_phone2" />
		</wz-step>
	</wizard>
</form>

Вот как выглядят шаблоны:
wizard.tpl.html

<div class="wizard">
    <div class="steps uk-clearfix">
        <ul ng-if="!hideIndicators" class="uk-clearfix">
            <li ng-class="{ default: !step.completed && !step.selected, current: step.selected && !step.completed, done: step.completed && !step.selected, editing: step.selected && step.completed, last: $last}" ng-repeat="step in getEnabledSteps()">
                <a ng-click="goTo(step)">
                    <span class="number">{{$index+1}}</span>
                    <span class="title">{{step.title || step.wzTitle}}</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="content" ng-transclude></div>
</div>

wizard.step.tpl.html

<section ng-show="selected" ng-class="{current: selected, done: completed}" class="step body" ng-transclude>
</section>

Вопрос:
В момент инициализации контроллера содержимого формы еще нет.
Как мне в контроллере получить доступ к содержимому подгружаемых шаблонов? Для того чтобы выполнить например:

$maskedInput = $('.masked_input');
if($maskedInput.length) {
    $maskedInput.inputmask();
}

На данный момент решаю эту проблему с помощью $timeout:

$timeout(function(){
	$maskedInput = $('.masked_input');
	if($maskedInput.length) {
		$maskedInput.inputmask();
	}
}, 1);

Но понимаю что это не правильно. Как найти верный способ?

Answer 1

[Сергей Протько]

мне нужно подключить input mask.

делаем ее директивой, и все хорошо, ангуляр все разрулит. У вас не должно возникать желания что-то самому отлавливать в DOM. Во всяком случае в 99% случаев.

Все должно быть директивой.