AngularJS создает частичный шаблон с параметром

Question

Я прошел ниже ТАК вопросы, чтобы получить то, что я хочу.

создать один HTML-представление для нескольких частичных представлений в angularjs

Частичные представления в AngularJS

AngularJs включают частичный шаблон

Частичный шаблон 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>

Я хочу передать имя сущности в качестве параметра и отобразить этот 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>