AngularJS：组件中的相互依赖答案

【问题标题】：AngularJS: mutual dependencies in componentsAngularJS：组件中的相互依赖
【发布时间】：2017-04-04 01:54:48
【问题描述】：

我有两个有很多交叉引用的组件。我决定让它们相互依赖：

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!

我该如何解决？它是好的建筑吗？你会推荐什么？

【问题讨论】：

两个组件都没有另一个组件作为父组件。他们是兄弟姐妹。

标签： javascript angularjs components

【解决方案1】：

从设计的角度来看，创建如此紧密依赖的组件是不可取的。相反，您可以创建公共服务并在它们之间共享数据，或者您可以在分页和任务列表组件之上创建一个父组件来管理这两个组件。检查哪个更适合您的场景。

【讨论】：

【解决方案2】：

首先，require 语法应该类似于parentCtrl: "^taskList"。这将从其元素到其父级查找所需的控制器。在 api 文档 here 中阅读更多相关信息。

在两个组件中实现 require 以相互引用是不可取的，并且可能不会起作用。

我建议你可以有一个通用的服务或者有父子组件并实现单向绑定

【讨论】：