Question

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

1 个答案: