javascript - AngularJS 使用参数创建部分模板

Question

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

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

我有这个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？

score 3 · Accepted Answer

你可以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>where entityObjis a variable in your $scope(或者相应地，如果你使用controllerAs语法)

编辑：其他方法是将指令作为属性而不是元素。

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

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

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

javascript - AngularJS 使用参数创建部分模板

1 回答 1

Related

Reference