如何在 AngularJS 中为子模板提供数据？答案

【问题标题】：How to feed a subtemplate with data in AngularJS?如何在 AngularJS 中为子模板提供数据？
【发布时间】：2016-10-22 05:59:10
【问题描述】：

我有 4 种类型的子模板可以出现在我的父模板中。假设这些是表单中的不同输入类型。我从服务器获取了一些数据，并希望将检索到的数据提供给这些模板（选择带有选项的输入字段）。

我会使用这样的东西：

<ng-include src="'./path/to/template/input/' + vm.data.type + '.html'"></ng-include>

但我想更多次地使用这个模板并为其提供不同的数据。像这样：

<select>
      <option ng-repeat="option in myOptionsData">{{option.text}}</option>
</select>

我应该能够像调用带有数据参数（myOptionsDatafrom 以上）的函数一样调用这段 UI。这如何正确解决？我读到了一个新的控制器，数据将由服务传递，但是为每种类型的子模板创建一个服务对我来说似乎很麻烦。我错过了什么吗？

【问题讨论】：

【解决方案1】：

这有点简单，你可以在你的 HTML 中使用类似的东西：

<ng-include src="vm.resolveUrl(vm.data.type)">
</ng-include>

所以您可以在控制器中执行此操作：

$scope.resolveUrl = function(param) {
    return "./path/to/template/input/" + param + ".html"
}

解决这个问题的更恰当的方法是更易于维护且更具可读性的代码段。所以让我知道这是否适合你！

【讨论】：

【解决方案2】：

我在this 帖子中找到了答案。解决方案是给ng-includeònload`属性提供如下数据：

<ng-include src="'./path/to/template/input/' + vm.data.type + '.html'" onload="myOptionsData=vm.someData"></ng-include>

效果很好，我想知道是否有更好的解决方案。

【讨论】：