angularjs - ui-router : named views (multiple) views, 保持一切分离？

Question

我刚刚开始使用 ui-router，我正在创建组件( Angular 1.5)并使用此处解释的新组件方法，尽管这并不重要 - http://angular-ui.github.io/ui-router/1.0.0-alpha.5/interfaces/ng1.ng1viewdeclaration.html#component

我认为我需要考虑我的州的绝对和相对观点。让我描绘一下我的问题，最好加上解释。

我有许多高级组件(使用 Angular 1.5 组件)。一些高级组件有子组件，但我不想将这些东西紧密耦合在一起。

以搜索组件为例，在该搜索组件内部，它依赖于历史记录项和已保存的项。历史记录项和保存的项都是子组件。已保存的项目还有 2 个子项目:云项目和本地项目。

因此，在搜索组件中，我不想将其与子组件紧密耦合，因为我可以在没有子组件的情况下使用搜索组件，所以我考虑使用相对 View 。

我可以放置 2 x

<div ui-view></div>

在搜索组件中和 2 x

<div ui-view></div>

在已保存的项目中。

但感觉不对，我没有专门与特定 View 名称紧密耦合，但搜索组件仍然需要 2 个子项，而保存的项目也需要 2 个，情况可能并非如此。

也许我想太多了，让我的组件太小了？但我希望它们能够更好地组合，并且从技术上讲，搜索可以在没有子项的情况下存在。

Answer 1

如果我正确理解了你的问题，你可能想要做的是将你的父组件指令限制为 Element restrict:'E'并将子组件作为属性添加到该指令中将它们限制为属性 restrict:'A'

并在指令和链接函数中使用指令来处理子指令

所以你的最终指令应该是这样的

<ui-view newattr1 newattr2></ui-view>

其中 ui-view 将是您的父组件，newattr1、newattr2 将是子组件。如果您的 <ui-view newattr1 newattr2></ui-view> 中没有任何一个子组件子组件各自的链接函数。