如何在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

注意：这不是我的原始答案，但是这是我在稍微使用角度后会做的事情。

我想创建一个HTML模板传递动态数据的指令，因为在看到标记一个指令，这个小提琴。

此示例的步骤/注释：

1. 在templateUrl和属性中定义带有标记的指令，该指令用于将数据传递到指令中（type在此示例中命名）。
2. 在模板中使用指令数据（type在此示例中为名称）。
3. 在标记中使用指令时，请确保将数据从控制器作用域传递到指令（<address-form type="billing"></address-form>（计费正在访问控制器作用域中的对象）。
4. 请注意，在定义指令时，名称以驼峰大小写，但在标记中使用时，则以小写破折号分隔（即，addressForm在js中但address-form在html中命名）。可以在这里的角度文档中找到关于此的更多信息。

这是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>

原始答案（与使用指令BTW完全不同）。

注意：由于错误，我下面原始答案中的小提琴似乎不再起作用（但请保留在此处，以防仍然有用）

Google网上论坛对此进行了讨论，您可以在此处查看。

它看起来像这样的功能不支持开箱即用，但你可以使用布莱斯的补丁中描述的这个帖子。

这是他的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>