如何使用AngularJS中的数据提供子模板？

Question

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

我应该可以将这个UI称为带有参数（上面的myOptionsData）的函数，用于数据。这怎么解决了？我读到了一个新的控制器，其中数据将由服务传递，但是对于我来说，为每种类型的子模板创建服务似乎非常麻烦。我错过了什么吗？

Answer 1

这很简单，您可以在 HTML 中使用：

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

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

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

解决此问题的更恰当的方法是更易于维护且更易读的代码片段。如果这对您有用，请告诉我！

Answer 2

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

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

它工作正常，我想知道哪里有更好的解决方案。