AngularJS: Как перевести несколько директив?

(1) У меня есть директива о переходе, называемая portlet, которая берет свое содержание и обертывает его каким-то шаблоном. Например:AngularJS: Как перевести несколько директив?

<portlet> 
    <div class="foobar">My content</div> 
</portlet>

проходит через шаблон portlet, что:

<div class="portlet"> 
    <div class="icon"></div> 
    <div class="content" ng-transclude="">   
    </div> 
</div>

И становится:

<div class="portlet"> 
    <div class="icon"></div> 
    <div class="content"> 
     <div class="foobar">My content</div> <!--the original content 
             passed to portlet--> 
    </div>

(2) У меня есть еще две директивы, dyn-form и dyn-form-field , Описанная таким образом:

<dyn-form> 
    <dyn-form-field type="textbox" placeholder="..." label="Name" /> 
    <! ...and so on... --> 
</dyn>

dyn-form 's Шаблон:

<form class="..." ng-transclude=""> 
</form>

Каждый dyn-field' s шаблон генерирует HTML для создания метки/поля для него. Таким образом, исходный код переводится в нечто вроде этого:

<form class="..."> 
    <label>Name: <input type="text" placeholder="..." /></label> 
    <!- ....and so on... --> 
</form>

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

<dyn-form-portlet> 
    <dyn-form> 
    <dyn-form-field /> 
    </dyn-form> 
</dyn-form-portlet>

dyn-form-portlet «s шаблон выглядит следующим образом:

<div class="dyn-form-portlet"> 
    <button>Foo</button> 
    <button>Bar</button> 
    <portlet ng-transclude=""> 
    </portlet> 
</div>

Theoratically это должно работать, т.е. <dyn-form> должны быть размещены внутри <portlet>, <dyn-form-field> сек внутри <dyn-form> , и так далее. Но когда я запускаю это, я вижу только кнопки, отображаемые dyn-form-portlet и код для portlet, но portlet пуст и форма не отображается в нем.

Я делаю что-то неправильно или это ошибка?

источник

2013-08-28 Click Upvote

Сделано plunk, если есть кто-то заинтересован: http://plnkr.co/edit/FUYCQbw8Tnx3Qhcj4108?p=preview Если вы удалите transclude: true из портлета, это работает, но я не уверен в последствиях. –

Вот что я считаю, что это происходит. Директива '' внутри шаблона 'dyn-form-portlet' скомпилирована Angular перед связыванием директивы, поэтому, когда обрабатывается' dyn-form-portlet', тег 'portlet' внутри своего шаблона уже был визуализирован. Взгляните на этот [Plunker] (http://plnkr.co/edit/szuDxjGPB8id2yrto7zM?p=preview) и проверьте выход консоли. Не знаю, является ли это ошибкой или просто угловым естественным поведением в таком случае. –

@MichaelBenford Это действительно то, что, кажется, происходит, однако это похоже на ошибку. Я имею в виду, что все под-директивы внутри 'dyn-form' переводятся в' dyn-form', поэтому почему он должен отличаться для 'dyn-form-portlet' и' dyn-form'? Может ли кто-нибудь сообщить об этом как об ошибке для команды AngularJS? –

Мне удалось это исправить. Я использовал transclude : 'element' вместе с replace : true по директиве portlet, и я дал ему priority выше других директив. Причина, по которой я это делала, скорее ощущается, чем глубокое знание внутренних условий.

О первой части transclude : 'element' используется, потому что

«элемент» - transclude всего элемента, включая любые директивы, определенные на более низкий приоритете.

Replace используется, потому что из того, что я видел, он всегда используется, когда transclude установлен в элемент. Приоритетом была моя догадка.

Вот plnkr http://plnkr.co/edit/axQ90dHOLmLNeNQ4ZlNl?p=preview

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

источник

2013-09-30 20:35:45 Marek

AngularJS: Как перевести несколько директив?

ответ

Смежные вопросы