AngularJS: взаимные зависимости в компонентах

Question

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

taskList компонент:

angular.module("todo-feature") 
    .component("taskList", { 
     templateUrl: "feature/todo-feature/todo_table.html", 
     controller: "Todo", 
     require: { 
      "parent": "paging" 
     } 
    }); 

paging компонент

angular.module("paging-module") 
    .component('paging', { 
     templateUrl: "feature/todo-feature/paging/paging.html", 
     controller: "PagingController", 
     require: { 
      "parent": "taskList" 
     } 
    }); 

index.html:

<paging></paging> 
<task-list></task-list> 

Это не работает. Я получаю две ошибки:

Controller 'paging', required by directive 'taskList', can't be found! 
Controller 'taskList', required by directive 'paging', can't be found! 

Как это исправить? Это хорошая архитектура? Чтобы вы посоветовали?

Answer 1

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

Answer 2

Прежде всего, синтаксис require должен быть чем-то вроде parentCtrl: "^taskList". это будет искать требуемый контроллер от его элемента до его родителей. подробнее об этом читайте в api doc here.

Выполнение требования в обоих компонентах для связи друг с другом нецелесообразно и, вероятно, это не сработает.

я рекомендовал бы, что вы можете иметь общую службу или иметь родитель-потомок компоненты и осуществлять односторонние привязки