AngularJS 使用参数创建部分模板

Question

我已经通过以下SO 问题得到我想要的。

create a single html view for multiple partial views in angularjs

Partial views in AngularJS

AngularJs Include Partial Template

angularjs partial template with specific scope - 看起来很接近我想要的。

但我相信我的情况与所有人都不同。因此，问题。

我有这个HTML 结构，需要重复很多次。

<tr>
    <td>
        Enitity1
    </td>
    <td>
        <input type="radio" name="entity1" value="option1" />
    </td>
    <td>
        <input type="radio" name="entity1" value="option2" />
    </td>
    <td>
        <input type="radio" name="entity1" value="option3" />
    </td>
    <td>
        <input type="radio" name="entity1" value="option4" />
    </td>
    <td>
        <input type="radio" name="entity1" value="option5" />
    </td>
</tr>

我想将实体的名称作为参数传递，并根据该参数呈现此 HTML 模板。

我已经创建了一个类似下面的模板。

<tr>
    <td>
        {{entity}}
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option1" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option2" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option3" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option4" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option5" />
    </td>
</tr>

我的控制器

app.controller("entitiesController", ["$scope",
    function entitiesController($scope) {
        $scope.init = function init(entity) {
            $scope.entity= entity;
        };
    }
]); 

我正在尝试在 <tbody> 元素中为多个实体呈现相同的内容，如下所示。

<ng-include src="Common/entities.html" ng-controller="entitiesController" ng-init="init('Entity1')"></ng-include>
<ng-include src="Common/entities.html" ng-controller="entitiesController" ng-init="init('Entity2')"></ng-include>
<!-- Some more entities here...-->

但它不起作用。它也不会在控制台中引发任何错误。

我该怎么做？处理这个的正确方法是什么？是否可以使用模板来处理它，还是我应该手动为所有实体放置 HTML？

Answer 1

您可以通过directive 为您执行此操作。类似的，

myApp.directive("myEntity", function() {
  return {
    restrict: "E",
    scope: {
      entity: "="
    },
    templateUrl: "Common/entities.html"
  }
})

现在，您可以使用您在Common/entities.html 中创建的模板，即，

<tr>
    <td>
        {{entity}}
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option1" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option2" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option3" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option4" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option5" />
    </td>
</tr>

最后，像<my-entity entity="entityObj"></my-entity> 一样使用它，其中entityObj 是$scope 中的一个变量（或者相应地，如果你使用controllerAs 语法）

EDIT：另一种方法是将指令作为属性而不是元素。

myApp.directive("myEntity", function() {
  return {
    restrict: "A",
    ...
  }
})

然后，从模板中删除 <tr>。现在，我们可以像这样使用它，

<tbody>
  <tr my-entity entity="entityObj">
  </tr>
</tbody>