如何在AngularJS的ngInclude指令中指定模型？
我想在3个地方使用相同的HTML模板，每次都使用不同的模型。 我知道我可以访问模板中的variables，但是名称会有所不同。
有没有办法将模型传递给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的方法不好，还有什么我应该尝试的？
注意：这不是我原来的答案，但这是我如何做一些使用angular度后这样做。
我将创build一个指令与HTML模板作为标记传递dynamic数据的指令，如在这个小提琴中看到的。
这个例子的步骤/注释：
- 在
templateUrl和属性（s）中定义一个带有标记的指令，用于将数据传递到指令（在本例中为指定type）。 - 使用模板中的指令数据（在本例中为named
type）。 - 在标记中使用指令时，请确保您将控制器范围中的数据传递给指令（
<address-form type="billing"></address-form>（其中计费正在访问控制器作用域上的对象） 。 - 请注意，定义一个指令时，名称是骆驼，但在标记中使用小写的短划线（即在js中名为
addressForm，但在html中为address-form）。 关于这方面的更多信息可以在angular度文档中find 。
这里是js：
var myApp = angular.module('myApp',[]); angular.module('myApp').directive('addressForm', function() { return { restrict: 'E', templateUrl: 'partials/addressform.html', // markup for template scope: { type: '=' // allows data to be passed into directive from controller scope } }; }); angular.module('myApp').controller('MyCtrl', function($scope) { // sample objects in the controller scope that gets passed to the directive $scope.billing = { type: 'billing type', value: 'abc' }; $scope.delivery = { type: 'delivery type', value: 'def' }; });
带标记：
<div ng-controller="MyCtrl"> <address-form type="billing"></address-form> <address-form type="delivery"></address-form> </div>
ORIGINAL ANSWER（与使用BTW指令完全不同）。
注：从我原来的答案下面的小提琴似乎不工作了，由于一个错误（但保持在这里，以防万一它仍然有用）
有关Google小组的讨论，您可以在这里看到 。
它看起来像这个function不支持开箱，但你可以使用Brice的补丁，如本文所述。
这里是他的jsfiddle的示例代码：
<script id="partials/addressform.html" type="text/ng-template"> partial of type {{type}}<br> </script> <div ng-controller="MyCtrl"> <ng-include src="'partials/addressform.html'" onInclude="type='billing'"></ng-include> <ng-include src="'partials/addressform.html'" onLoad="type='delivery'"></ng-include> </div>
有一个相当简单的解决scheme，但我必须承认，这不是Misko推荐的。 但是，如果创build一个指令对你来说是一个矫枉过正，并且得到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/
有一个拉来解决这个问题，但它看起来像死了： https : //github.com/angular/angular.js/pull/1227
在不修改Angular源代码的情况下，这样可以以一种可重复使用的方式解决问题：
directive('newScope', function() { return { scope: true, priority: 450, }; });
举个例子：
<div new-scope ng-init="myVar = 'one instance'" ng-include="'template.html'"></div> <div new-scope ng-init="myVar = 'another instance'" ng-include="'template.html'"></div>
这是一个在行动中的调度者： http ://plnkr.co/edit/El8bIm8ta97MNRglfl3n
快速解决scheme：
<div ng-init="details=document||language||projectSummary.ProjectResults">
<div new-scope="myVar = 'one instance'" ng-include="'template.html'"></div> directive('newScope', function () { return { scope: true, priority: 450, compile: function () { return { pre: function (scope, element, attrs) { scope.$eval(attrs.newScope); } }; } }; });
这是一个指令，它将John Culviner的答案与Angular的ng-init代码结合起来。
为了完整起见 ，这是Angular 1.2的26 ng-init源代码 ，你可以看到新范围指令中唯一的变化是增加了scope: true
{ priority: 450, compile: function() { return { pre: function(scope, element, attrs) { scope.$eval(attrs.ngInit); } }; } }
我听到你的声音 ng-include不是可重用的，因为它可以访问全局范围。 这有点奇怪。
应该有一种方法来设置局部variables。 使用新的指令而不是ng-include是一个更清洁的解决scheme。
理想的用法如下所示：
<div ng-include-template="'Partials/SummaryDetails.html'" ng-include-variables="{ 'detailsObject': language }"></div>
该指令是：
.directive( 'ngIncludeTemplate' () -> { templateUrl: (elem, attrs) -> attrs.ngIncludeTemplate restrict: 'A' scope: { 'ngIncludeVariables': '&' } link: (scope, elem, attrs) -> vars = scope.ngIncludeVariables() for key, value of vars scope[key] = value } )
您可以看到该指令不使用全局范围。 而是从ng-include-variables中读取对象，并将这些成员添加到自己的本地作用域中。
这是干净的和通用的。
