将变量传递给 ng-transclude答案

【问题标题】：Passing variables into ng-transclude将变量传递给 ng-transclude
【发布时间】：2019-08-10 07:10:07
【问题描述】：

我想知道，是否可以将 $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>

【问题讨论】：

AnguarJS $compile 服务将嵌入的内容链接到组件的父范围。由于$index 属性是组件作用域的子作用域的一部分，因此它不适用于任何嵌入的内容。
我可以想到三种方式让嵌入的内容与组件控制器进行通信。范围变量不是其中之一。
我在听……
使用<textarea> 元素，内容绑定到使用ng-model 指令的控制器。
@georgeawg 你会按照我回答的方式做吗？ :)

标签： javascript html angularjs angularjs-compile

【解决方案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',
}

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

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

并通过this.translatedTextareaMenu.locale访问它

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

有关详细信息，请参阅

【讨论】：

举个例子会很有帮助。
我们去@georgeawg
require 是<textarea> directive 与ngModelController 通信的方式。以及ngModelController 与<form> directive 及其ngFormController 通信的方式。