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



  • 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?



  • 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) {
        // Можно навешивать маски на инпуты
    });
    

Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2