Javascript AngularJS使用参数创建部分模板

为了得到我想要的东西，我已经通过了下面的问题

-看起来很接近我想要的

但我相信我的情况和他们所有人都不一样。因此，这是一个问题

我得到了这个

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>

我试图在

元素中为多个实体呈现相同的效果，如下所示

<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？

您可以使用

指令来执行此操作。大概

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>

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

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


你不能为这个需求创建一个指令吗？@tanmay嗯，我对AngularJS比较陌生。您能简单介绍一下指令在这种情况下是如何工作的吗？我的意思是，我最近创建了一些基本指令，但没有发出或插入任何HTML模板。感谢您的快速响应，我将尝试一下！奇怪，它在工作。但是，它仅发射模板中有表达式的零件。也不是在它的父元素中，而是在其他地方。有什么想法吗？它只获取
输入
元素，而不是
s。另外，我将此指令放在
标记中，如
。但是它在我的页面上的其他地方呈现，而不是在
元素中。是的，呈现问题现在消失了。它正在渲染它应该渲染的地方。但是它没有设置
{}
表达式中的值。我是这样使用它的：
。但它并没有将表达式中的值替换为参数
Entity1
，而是将其替换为空白。可能是因为我将其作为文本变量传递，而不是作为
范围
对象传递。这可能是问题所在吗？
<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>

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

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