The event of loading ng-transclude, to connect the violin?

[jonetta]

I'm building an Angular-Wizard module. https://github.com/mgonto/angular-wizard )

It includes directives. They've got a pattern. I'm using the module to create a mundane form. Everything works perfectly.

But the only nuance. When the pages are downloaded, the directives wizard are pulling their template. Since I use it to create forms, I need to connect 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': '+7 (999) 999 99 99'" 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': '+7 (999) 999 99 99'" 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': '+7 (999) 999 99 99'" 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>

That's what the templates look like: 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>

Question:At the time of initialization, the controller of the shape contents is not available. How do I get access to the contents of the submerged templates in the control room? For example:

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

To date, I'm dealing with this problem with $timeout:

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

But I know it's not right. How do you find the right way?

[zymir]

You can come up with this kind of hack.

You're setting up a caste directive that, when loaded, will send a notice that it's downloaded. Put her in the suit you need, and you'll get an event on which the form will already exist.

Set a directive:

youModule.directive('ngTplIsReady', function() {
    return {
        scope: true,
        link: function($scope, $element, attrs) {
            $scope.$root.$broadcast('tpl_is_ready');
        }
    }
});

Enter the template <div data-ng-tpl-is-ready></div>

In the controller, it is an event from the directive:

$scope.$on('tpl_is_ready', function(e) {
    // Можно навешивать маски на инпуты
});