[SOLVED] Passing variables into ng-transclude

Passing variables into ng-transclude

I am wondering, is it possible to pass an $index param into the ng-transclude? I am trying to focus into the textarea by clicking on the elements in the ng-transclude, triggering a function inside the controller that sees the textarea, but I can't get the right ID.

<div
    ng-repeat="locale in $ctrl.enabled">
    <table>
        <tbody>
            <tr>
                <td flex layout="row" layout-align="start end">
                    <ng-transclude
                        ng-transclude-slot="theExtraMenu">
                    </ng-transclude>
                </td>
            </tr>
            <tr>
                <td>
                    <md-input-container
                        md-no-float="true">
                        <textarea id="{{'textarea'+$index}}">
                        </textarea>
                    </md-input-container>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Solution

So in the end, I created a parent component that has the locale as an input and transcludes all of the necessary content. Then I require the controller of said component and that's how I see the value of locale.

The reason I didn't go with the scope parent access was that if the hierarchy of the scope changed, it got broken.

Thanks @georgeawg for inspiration.

EDIT: example -

<div ng-repeat="locale in $ctrl.enabled">
 <translated-textarea-menu locale="locale">

  <the-extra-menu>
    <ng-transclude ng-transclude-slot="theExtraMenu"></ng-transclude>
  </the-extra-menu>

 </translated-textarea-menu>

The parent component (translated-textarea-menu)

component: {
    templateUrl: 'xyz.html',
    bindings: {
        locale: '&',
    },
    transclude: {
        theExtraMenu: '?theExtraMenu'
    },
    controller: TranslatedTextareaMenuController,
    controllerAs: '$ctrl',
}

And then in the transcluded component (the extra menu component)

component: {
    templateUrl: 'x.html',
    bindings: {
        variables: '&'
    },
    require: {
        translatedTextareaMenu: '^translatedTextareaMenu'
    },
    controller: TheExtraMenuController,
    controllerAs: '$ctrl',
}

And access it with this.translatedTextareaMenu.locale

Directives can require the controllers of other directives to enable communication between each other. This can be achieved in a component by providing an object mapping for the require property. The object keys specify the property names under which the required controllers (object values) will be bound to the requiring component's controller.

For more information, see