Question

我已经通过以下SO个问题来获取我想要的内容。

create a single html view for multiple partial views in angularjs

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使用参数创建部分模板

1 个答案: