Блог

Я застрял с Angular. У меня есть директива, которая показывает список, и когда пользователь наводит курсор на элемент, я хочу показать предварительный просмотр элемента, причем предварительный просмотр предоставляется пользователем директивы. Однако есть некоторые хитрости… Я хочу, чтобы пользователь мог фильтровать список с помощью ввода [что само по себе легко], и вокруг списка есть некоторый базовый стиль, который я хотел бы, чтобы директива обрабатывала, например, добавляя флажки, за которыми следует следить, чтобы создать модель для директивы.

Я хочу, чтобы пользователь директивы просто мог писать:

 <preview-list list='unfilteredlist'>
    <div>
        <h1><blink>{{title}}</blink></h1>
        <h2><marquee>{{html extrodinaire}}</marquee></h2>
    </div>
</preview-list>
  

Я пытался использовать ng-transclude, но он использует родственную область видимости, и я искал обходные пути, но не смог их найти. Единственные, которые я нашел, включали написание всего шаблона на javascript, что, честно говоря, я не могу поверить, что люди думают, что это приемлемое решение.

Какие-либо решения, или это на самом деле совершенно невозможно в Angular?

Как я вижу, у вас есть два варианта :

1. Создайте окно предварительного просмотра для каждого элемента в вашем списке и переключайте видимость при наведении курсора мыши. Это здорово, если у вас всего несколько значений, а окно предварительного просмотра слишком большое.

2. Создайте переведенную директиву, в которой — основная область будет содержать список и текущий элемент наведения. Дочерняя область будет содержать контейнер предварительного просмотра. Как только выбранное значение изменится, окно предварительного просмотра обновится (в соответствии с вашими привязками), и единственное, что осталось сделать, это расположить его.

сначала сложно выполнить трансклюдирование, но это окупается.

Надеюсь, это поможет.