В AngularJS, как я могу повторить элемент дважды, но не последовательно? - PullRequest
Новая
       8

В AngularJS, как я могу повторить элемент дважды, но не последовательно?

0 голосов
/ 08 ноября 2018

В моем html-файле шаблона AngularJS есть html-элемент, такой как 

<div>This is a complicated element that I don't want to type twice</div>

и мне нужно, чтобы этот элемент появлялся дважды на моей веб-странице, но не последовательно (в отличие от поведения ng-repeat).

Элемент достаточно мал, поэтому для меня нет смысла делать для него целый компонент (но, возможно, я ошибаюсь). Я надеюсь, что для этого есть простая шаблонная функция. Директива может сработать (но я их плохо понимаю).

БОНУС : Было бы еще лучше, если бы эти два элемента могли отражать друг друга. Я имею в виду, что элемент содержит текстовый ввод, и если пользователь помещает текст в один, другой должен обновляться соответствующим образом. Это может рассматриваться как другой вопрос, потому что для этого может потребоваться другая техника.

1 Ответ

0 голосов
/ 08 ноября 2018

Рассмотрите возможность использования angularjs components например: https://codepen.io/fadihania/pen/bwpdPq

HTML: 

<div ng-app="app">
  <my-component>
    <p>Test</p>
  </my-component>
</div>

JS: 

angular
  .module('app', [])
  .component('myComponent', {
    template: '<div>' +
              '<h1>My Component</h1>' +
              '<ng-transclude></ng-transclude>' +
              '</div>',
    transclude: true
  });

Затем положите component столько раз, сколько вам нужно и куда вам нужно.

...