Angularjs повторно использовать шаблон и привязать к различным свойствам в одной и той же области видимости

Question

Я хотел бы многократно использовать включенный экспресс-шаблон и выборочно связывать его с различными свойствами области следующим образом:

<div ng-show="isCoApplicant" bind-to="applicant in data.coApplicant">
    <% include ../row-templates/applicant-row %>
</div>

Аналогично поведению ng-repeat, которое создает дочернюю область для строки и устанавливает для нее свойство в соответствии с выражением "заявитель в data.coApplicant", а входные данные строки могут быть связаны с "заявителем" через модель ng.

Я потратил некоторое время на изучение различных угловых директив, включая ng-controller, ng-include, ng-model и т. Д., И я не могу собрать их вместе.

Цените любую помощь в выяснении этого связывания.

Answer 1

@cheekybastard поставил меня на правильный путь с областью действия директивы и свойствами шаблона. В конце я хотел использовать повторно используемую директиву для динамического включения шаблона и привязки определенного свойства из родительской области в область шаблона. Я был удивлен, что у angular еще не было чего-то подобного, я думаю, мой вариант использования не слишком распространен.

Вот чем я закончил:

HTML

<div bind-template-to="data.coApplicant" template-url="/row-templates/applicant-row.ejs"></div>

Директива JS

.directive('bindTemplateTo', function() {
    return {
        restrict: 'A',
        scope: {
            data: '=bindTemplateTo'
        },
        templateUrl: function(element, attr) { return attr.templateUrl; }
    };
});

шаблон

<input ng-model="data.first" ...>

Кажется, вам нужно использовать шаблон через свойство template или templateUrl в директиве, чтобы изолировать область, доступную вашим элементам. Т.е. если вы просто используете директиву для создания изолированной области видимости для div и надеетесь, что элементы внутри div будут связываться с новой изолированной областью, вы будете разочарованы.

Спасибо за вашу помощь.

Answer 2

Используйте директиву. В вашем HTML вы можете вызвать директиву с помощью <my-applicant>, вы можете использовать его несколько раз, а данные, как data.coApplicant может быть привязан к каждой директиве изолировать область действия через applicantData приписывать.

HTML

<my-applicant applicantData='data.coApplicant'></my-applicant>

Директива JS

.directive('myApplicant', function() {
  return {
    restrict: 'E',
    scope: {
      applicantData: '='
    },
   template: '<div ng-show="isCoApplicant"' +
             'bind-to="applicant in data.coApplicant">' +
             '<% include ../row-templates/applicant-row %></div>'
  };
});

Для получения дополнительной информации о директивах прочитайте руководство разработчика Docs https://docs.angularjs.org/guide/directive