Разделение пользовательского интерфейса и контроллеров во вложенной пользовательской директиве

Question

Разделение пользовательского интерфейса и контроллеров во вложенной пользовательской директиве

0

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

Я думаю, что это позволит мне полностью инкапсулировать детали каждой страницы мастера. Например:

<custom-wizard-tag>
    <enter-name-page page="1" name-placeholder="name"/>
    <enter-address-page page="2" name-placeholder="name" address-placeholder="address" last-page/>
</custom-wizard-tag>

Все идет нормально. Каждый из вышеперечисленных элементов имеет свою собственную директиву, и каждый из них указывает шаблонUrl и контроллер (например, templateUrl может быть предоставлен как атрибут).

Я хочу, чтобы каждая страница мастера "наследовала" какое-то поведение. Компоненты пользовательского интерфейса будут содержать кнопки, которые должны запрашивать внешнюю область, например, чтобы определить, можно ли перемещаться вперед, назад и так далее. Нам также необходимо вызвать функции-члены в родительской области, чтобы фактически переместить мастер вперед и назад и проверить, соответствует ли текущий номер страницы "нашим".

Я новичок в этом, так что медведь со мной...

Я прочитал документацию по directive и подумал, что могу использовать scope: { onNext: '&onNext' }, чтобы "наследовать" функцию onNext из предыдущей области (которая считается той, которая похожа на "волшебник"). Однако это не то, что кажется угловатым. Кажется, что нужно отобразить внутреннюю область действия onNext через атрибут, называемый on-next, тем самым нарушая инкапсуляцию, потому что теперь элементы UI должны ссылаться на функции в родительской области - именно этого я и хотел избежать.

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

Спасибо за ваше терпение.

Richard Hodges 23 июль 2016, в 14:29

Источник

0

Вам все еще нужно передать в функцию родительских контроллеров что-то вроде: on-next = "onNext" и в директиве вызвать ее как scope.onNext () (аргумент);
v0d1ch 23 июль 2016, в 13:00
0

@vodich разве нет чистого способа избежать этого? Я хочу связать интерфейсы контроллеров друг с другом, а не контроллеры с элементами пользовательского интерфейса, по крайней мере, в общем определении мастера.
Richard Hodges 23 июль 2016, в 13:03
0

Итак, вы хотите, чтобы дочерняя директива "enter-address-page" имела доступ к родительским (wizard-tag) свойствам / функциям?
Adam 23 июль 2016, в 13:07
0

@RichardHodges хорошо, вы связываете директивы с контроллером, иначе может быть так, что вы используете события, чтобы делать то, что вам нужно, в верхней части моей головы
v0d1ch 23 июль 2016, в 13:27
0

Будет ли шаблон делегата соответствовать тому, что вы достигаете? Может быть, мы можем попытаться установить делегат области в другую область, а затем сделать что-то вроде scope.delegate.foo() ? И мы можем как-то объявить, какие методы должны быть реализованы областью delegate .
MMhunter 23 июль 2016, в 13:29
0

@MMhunter Я посмотрю на это. Спасибо за ссылку.
Richard Hodges 23 июль 2016, в 13:39

Показать ещё 4 комментария

Теги:

angularjs

angularjs-directive

1 ответ

Ещё вопросы

Вам все еще нужно передать в функцию родительских контроллеров что-то вроде: on-next = "onNext" и в директиве вызвать ее как scope.onNext () (аргумент);
@vodich разве нет чистого способа избежать этого? Я хочу связать интерфейсы контроллеров друг с другом, а не контроллеры с элементами пользовательского интерфейса, по крайней мере, в общем определении мастера.
Итак, вы хотите, чтобы дочерняя директива "enter-address-page" имела доступ к родительским (wizard-tag) свойствам / функциям?
@RichardHodges хорошо, вы связываете директивы с контроллером, иначе может быть так, что вы используете события, чтобы делать то, что вам нужно, в верхней части моей головы
Будет ли шаблон делегата соответствовать тому, что вы достигаете? Может быть, мы можем попытаться установить делегат области в другую область, а затем сделать что-то вроде scope.delegate.foo() ? И мы можем как-то объявить, какие методы должны быть реализованы областью delegate .
@MMhunter Я посмотрю на это. Спасибо за ссылку.

Adam · Answer 1 · 2016-07-23T10-54-00.000Z

scope: { onNext: '&onNext' } не будет наследовать, вам нужно будет определить onNext в шаблоне (область шаблона) так же, как и со свойством page: <enter-name-page page="1"

Если у вас есть функция onNext определенная в customWizardTag директиве customWizardTag либо в функции link либо в ее контроллере, вам придется поместить ее в контроллер, потому что контроллер может быть передан дочерней директиве. Затем вы сможете передать родительский директивный контроллер в функции ссылок директив somethingPage.

.directive('parentDirective, function() {
    return {
        controller: someControllerThatHasOnNext,
    }
 })

.directive('childDirective', function() {
    return {
        require: '^^parentDirective',
        link: function(scope, element, attrs, theParentDirectivesController){
            theParentDirectivesController.onNext();
        }
    }
})

Если это то, что вы хотели

Спасибо Адам. Я думаю, что это именно то, что я хочу. Итак, 4-й аргумент функции link - это родительский контроллер? Это начинает иметь больше смысла.
Да, вы можете получить больше информации в угловых документах -> директивах -> Создание директив, которые сообщают
На самом деле, это любой контроллер, который как-то связан с директивой. Или родитель или его собственный, я думаю. The require даст вам контроллер, один «^» означает собственный, если он существует, в противном случае он смотрит на родителей. «^^» означает только родитель.