如何使两个控制器在Angular中执行相同的动作，但更改网站的外观？

Question

我想在Angular中复制Google的主页功能，这让我感到悲伤。 我浏览了Egghead视频并阅读了整个API，但是没有确切的示例。 我想要执行以下操作：

• 用户进入首页，显示主搜索栏和通用黑色标题栏
• 用户进行搜索，只有当他按下“搜索”按钮时，主搜索栏才会消失，URL更改为mysite.com/q/searchTerm，新的子标题出现在黑色标题栏下方，与Google主页类似，在其中删除了主搜索字段，并将其放置在主标题栏下方的灰色栏中（如果您关闭了即时搜索功能）
• 搜索结果将显示在已经消失的主搜索栏上，就像使用Google一样，但是我可以使用路线和视图来处理这一部分。 两个相同的控制器之间的布局切换让我感到困扰。

到目前为止，我尝试过的是：

• 为两个MainCtrl子控制器都创建一个父控制器，并设置其scope.data = {searchHeaderDisplay：false}
• 两个子控制器共享相同的名称（MainCtrl），因为它们共享完全相同的功能
• 在标题栏中添加一个ng-show =“ data.searchHeaderDisplay”和一个主要的ng-hide =“ data.searchHeaderDisplay”，然后尝试在ng单击搜索按钮的情况下切换data.searchHeaderDisplay。 这没有用-没有产生任何效果。

我仍然对AngularJS有所了解，所以我确信它很简单，我只需要一个或两个实际的例子就可以学习。

编辑：最好将辅助标头（具有较小的搜索字段）与搜索结果一起推到单独的视图模板中，而仅将根视图作为主要搜索字段？ 该文档非常缺乏有关视图和路线的最佳实践，特别是那些将由多个控制器执行某项操作的路线。

Answer 1

如果我理解正确，您可以在两个MainCtrl控制器的父控制器上设置scope.data = {searchHeaderDisplay: false} ，以使MainCtrl控制器能够共享相同的模型数据。 没关系的

没有看到您的代码，我的猜测是问题出在如何通过ng-click切换data.searchHeaderDisplay 。 您data.searchHeaderDisplay在子作用域级别（即，与MainCtrl控制器相对应的作用域） data.searchHeaderDisplay设置为它们的父作用域级别。 让我知道您是否需要我详细说明。

更新：

看了所提供的代码后，问题确实出在我之前（上面）所怀疑的问题上。

mainProductSearch()是需要更改的内容。 代替scope.data.searchHeaderVisible = true; ，您需要scope.$parent.data.searchHeaderVisible = true ，原因已在前面进行了简要说明。 如果您仍然不清楚背后的原理，那么您可能需要熟悉AngularJS范围（和/或Javascript对象）的原型继承链 。 范围原型继承是AngularJS的重要组成部分。 这是关于这个话题的一篇很棒的文章 。

Answer 2

而不是AppCtrl（本质上类似于$ rootScope），而是使用$parent （这是一个脆弱的解决方案，因为更改HTML结构可能会导致此中断–例如，您可能会发现需要使用$parent.$parent...如果您添加一个中间的ng-controller），我建议您使用一种服务来存储与标头相关的模型数据。 我们称之为searchService 。

需要影响此模型的控制器可以注入服务。 这样做还有一个好处，就是可以清除依赖项（相对于控制器$ scope继承，其中的依赖项不明确）。 例如，当用户按下“搜索”时，控制器可以调用在服务上定义的通知方法： searchService.newSearchTerm(searchTerm) 。 现在，所有正在监视模型更改的视图（如标题视图）都将注意到更改并可以进行相应更新。

您可以考虑将ng-view用于页面的主要内容区域。

另请参阅https://stackoverflow.com/a/14619122/215945 ，其中讨论了非常相似的布局。 在该SO帖子中，标题中有一个带有商品计数的购物篮。 需要由多个控制器更新项目计数，因此我们将其放入服务中。