html - 如何在 AngularJS 中为 ngInclude 指令指定模型？

Question

我想在 3 个地方使用相同的 HTML 模板，只是每次都使用不同的模型。 我知道我可以从模板访问变量，但名称会有所不同。

有没有办法将模型传递给 ngInclude？

这就是我想要实现的，当然属性add-variable现在不起作用了。然后在我包含的模板中，我将访问 detailsObject 及其属性。

<pane title="{{projectSummary.ProjectResults.DisplayName}}">
    <h2>{{projectSummary.ProjectResults.DisplayName}}</h2>
    <ng-include src="'Partials/SummaryDetails.html'" init-variable="{'detailsObject': projectSummary.ProjectResults}"></ng-include>
</pane>

<pane  title="Documents" header="true"></pane>

<pane ng-repeat="document in projectSummary.DocumentResults" title="{{document.DisplayName}}">
    <h2>{{document.DisplayName}}</h2>
    <ng-include src="'Partials/SummaryDetails.html'" add-variable="{'detailsObject': document}"></ng-include>
</pane>

<pane ng-repeat="header in [1]" title="Languages" header="true"></pane>

<pane ng-repeat="language in projectSummary.ResultsByLanguagePairs" title="{{language.DisplayName}}">
    <h2>{{document.DisplayName}}</h2>
    <ng-include src="'Partials/SummaryDetails.html'" add-variable="{'detailsObject': language}"></ng-include>
</pane>

如果我在使用 ng-include 时采用了错误的方法，还有什么我应该尝试的吗？

Answer 1

有一个相当简单的解决方案，但我必须承认，这不是 Misko 推荐的方案。但是，如果创建一个指令对你来说是一种矫枉过正，并且获得 Brice 的补丁是不可行的，那么以下内容将对你有所帮助。

<div ng-repeat="name in ['A']" ng-include="'partial.html'"></div>
<div ng-repeat="name in ['B']" ng-include="'partial.html'"></div>

<script type="text/ng-template" id="partial.html">
   <div>{{ name }}</div>
</script>

很明显它为什么有效。请在此处查看示例:http://jsfiddle.net/Cndc6/4/