Home AngularJS inverse transclusion
Reply: 0

AngularJS inverse transclusion

Stnaire
1#
Stnaire Published in 2017-11-14 17:29:17Z

I have a multilingual app running on Angular 1.5.9 and Angular Material.

I would like to display all available translations for each translated field of a form in a generic way.

The idea is to display a button next to every field that changes value between languages.

Because there is some logic to do so, I've created a component that wrap the input field to display 2 new elements :

  • a button to toggle the display of translations
  • the translations (a div for each language containing the translated text)

Here a simplified sample of what I've got (comments have been added to clarify the need):

<!-- Form component -->
<cem-multilingual-form api="$ctrl.formApi" locale="$ctrl.formLocale" store="$ctrl.store" available-locales="$ctrl.availableLocales" model-identifier="$ctrl.modelIdentifier">
    <md-content layout-gt-sm="row" layout="column" layout-padding>
        <md-input-container flex>

            <!-- Component responsible of showing translations for the field -->
            <cem-multilingual-form-field name="name">
                <div class="cem-input-addons-group">
                    <!-- I've added some addons as example to show why I need this -->
                    <div class="cem-input-addon"><i class="fa fa-pencil"></i></div>
                    <div class="cem-input-group">
                        <label>Name</label>
                        <input name="name" ng-model="$ctrl.formApi.form.name" required ng-disabled="$ctrl.formApi.saving">
                    </div>
                    <div class="cem-input-addon-button">
                        <md-button class="md-accent md-raised">
                            A button
                        </md-button>
                    </div>
                    <!--
                      -- POSITION 1
                      -- 
                      -- Here I would like to include the toggle button to show/hide translations. 
                      -- The goal is to control where the button generated by "cem-multilingual-form-field" goes for each use.
                      -->
                </div>

                <!-- 
                  -- POSITION 2
                  -- 
                  -- Here I would like to show the translations 
                  -->

                <!-- Both POSITION 1 and POSITION 2 are part of the template of the "cem-multilingual-form-field" component -->

            </cem-multilingual-form-field>

            <!-- Other stuff.. -->
            <ng-messages for="$ctrl.formApi.form.$fc.name.$error">
                <ng-message when="required">This field is required.</ng-message>
            </ng-messages>
        </md-input-container>
    </md-content>
</cem-multilingual-form>

So in short, I need to "split" the template of cem-multilingual-form-field in two parts and define where each of them should go in the parent template.

The template could look like this:

<!-- Should go in POSITION 1 -->
<md-button>Toggle</md-button>

<!-- Sould go in POSITION 2 -->
<div ng-repeat="(locale, label) in $ctrl.parent.api.availableLanguages">
    <div class="language-name">{{ ::label }}</div>
    <div class="translation">{{ ::$ctrl.parent.getStoreResponse(locale).item[$ctrl.name] }}</div>
</div>

Is it even possible?

If not, do you see a better way to achieve the same result?

I thought about making a directive and manipulate the DOM manually in the link function but it's really ugly (if even possible, I didn't try yet).

Thanks for your help.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.312317 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO