Обмен неэлементным состоянием между контроллерами (Angular Architecture)

Question

В моей нынешней компании мы работаем с очень большим угловым применением. Один из пунктов постоянного спора заключается в том, чтобы выяснить, что является наилучшим способом совместного использования не-singleton-состояния между контроллерами. В идеальном сценарии, когда контроллеры разделяют состояние, которое является одиночным, мы можем моделировать это состояние как service и связываться между этими controllers, используя этот service, на inject.

Но мы хотим иметь несколько экземпляров этой иерархии, а это значит, что синглтон не поможет. Нам нужен контекстно-ориентированный синглтон, который также может быть инъекционным.

В настоящее время мы планируем сделать это через иерархию директив, где управляющие контроллеры верхнего уровня управляют состоянием, а затем все нижние директивы require этот контроллер (директивные контроллеры для директивы по связям!) И функции вызова на нем. Проблема с этим заключается в том, что требуемый контроллер доступен только в функции ссылок директив (что не так уж плохо, но поскольку большинство вещей будет происходить с этим состоянием, будет сложнее протестировать.! Функции связи сложнее чем контроллеры. Вы можете напрямую вводить контроллеры и тестировать их.).

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

Рассмотрим иерархию, как это (например) для лучшего понимания:

<post> 
    <header></header> 
    <button-array></button-array> 
    <editor></editor> 
    <footer></footer> 
</post> 
<post> 
    <header></header> 
    <button-array></button-array> 
    <editor></editor> 
    <footer></footer> 
</post> 

.... п вывешивает каждый уровень м глубокий ..

Пример здесь является тривиальным один, только с пройдя 1 уровень в глубину DOM. Учтите, что в приложении у нас есть 4-5-уровневые директивы. Мы спустили маршрут выделения изолята и передали значения, которые необходимы в дочерних директивах. Это сработало, но это было неправильно, потому что если директива на уровне 5 нуждалась в чем-то - все директивы между ними должны были маршировать эти данные (и выставлять переменную области видимости, которая ничего не делала, но передавала это значение на следующий уровень! кажется очень хрупким).

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

Answer 1

Если я думаю об этом правильно, элементы <post> в вашем примере имеют связанные с ними объекты состояния, и им необходимо передать это значение до <header> и так далее.

Я подхожу к этому, присоединяя объекты к области видимости на уровне html. Итак, <post item="items[0]">, а затем шаблон сообщения имеет в нем <header item="item"> и так далее. С изоляцией scope = type изменения распространяются вверх и вниз по дереву DOM, поскольку это всего лишь один объект javascript, в котором хранятся данные.

Вы также можете использовать иерархию управляющих контроллеров, но это означает, что такие вещи, как <button-array>, являются проводными в тех местах, где они отображаются в шаблонах (и если вы нажимаете или вытягиваете дочернюю директиву с точки зрения того, где она появляется иерархия DOM общего повторяющегося объекта, что нарушает вещи), тогда как прямое состояние состояния в каждом элементе работает нормально.

Я делаю это только с тем, что я бы назвал «состояние модели» - материал, который вы, возможно, в конечном итоге отправляете на сервер где-нибудь. Опубликовать заголовок и содержание, теги и т. Д.Состояние просмотра (разворот-сбой объектов) обрабатывается внутри компонента и используется для обнаружения границ компонента (если два компонента тесно связаны друг с другом, чтобы получить доступ к состоянию зрения друг друга, то они фактически являются одним компонентом).