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 语法）

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

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

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

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

AngularJS 使用参数创建部分模板

AngularJS create partial template with parameter

javascript

html

angularjs

angularjs-templates