将变量传递给 ng-transclude

Question

我想知道，是否可以将 $index 参数传递到 ng-transclude 中？我试图通过单击 ng-transclude 中的元素来聚焦文本区域，触发控制器内部的一个函数来查看文本区域，但我无法获得正确的 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>

Answer 1

所以最后，我创建了一个父组件，将语言环境作为输入并包含所有必要的内容。然后我需要所述组件的控制器，这就是我如何看待语言环境的价值。

我没有使用作用域父访问权限的原因是，如果作用域的层次结构发生变化，它就会被破坏。

感谢 @georgeawg 的启发。

编辑：示例 -

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

父组件(translated-textarea-menu)

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

然后在嵌入的组件（额外的菜单组件）中

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

并使用 this.translatedTextareaMenu.locale

访问它

指令可以require其他指令的控制器来启用彼此之间的通信。这可以在组件中通过为 require 属性提供对象映射来实现。对象键指定属性名称，所需的控制器（对象值）将在这些名称下绑定到所需组件的控制器。

有关详细信息，请参阅

将变量传递给 ng-transclude

Passing variables into ng-transclude

javascript

html

angularjs

angularjs-compile