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中了解更多相关信息。

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

我建议您可以拥有一个公共服务或拥有父子组件并实现单向绑定

AngularJS：组件中的相互依赖关系

2 个答案: