我想在 Angular 中复制 Google 的主页功能，这让我很伤心。我浏览了 Egghead 视频并阅读了整个 API，但没有具体的行为示例。我希望它执行以下操作:
- 用户来到主页，出现主搜索栏和通用的黑色标题栏
- 用户搜索某些内容，只有当他按下“搜索”时，主搜索栏才会消失，网址会更改为 mysite.com/q/searchTerm，黑色标题栏下方会出现一个新的子标题，这与 Google 的非常相似主页，其中删除了主搜索字段并放置在主标题栏下方的灰色栏中(如果您关闭了即时搜索)
- 搜索结果出现在现在消失的主搜索栏的位置，就像谷歌一样，但这部分我可以处理路线和 View 。两个相同 Controller 之间的布局切换让我很困扰。
到目前为止我尝试过的是:
- 为两个 MainCtrl 子 Controller 创建一个父 Controller ，并设置它的 scope.data = {searchHeaderDisplay: false}
- 让两个子 Controller 共享相同的名称 (MainCtrl)，因为它们共享完全相同的功能
- 在标题栏中制作一个 ng-show="data.searchHeaderDisplay"和主要的 ng-hide="data.searchHeaderDisplay"然后尝试在 ng-click 搜索按钮上切换 data.searchHeaderDisplay。这没有用 - 没有产生任何效果。
我仍然在接受 AngularJS，所以我确信它很简单，我只需要一两个实际的例子来学习。
编辑:将次级标题(具有较小的搜索字段)与搜索结果一起插入单独的 View 模板，并且只将 Root View 作为主要搜索字段会更好吗？该文档在有关 View 和路由的最佳实践方面非常宽松，尤其是将有多个 Controller 执行某项操作的路由。
最佳答案
如果我没理解错的话，你在两个 MainCtrl Controller 的父 Controller 上设置了 scope.data = {searchHeaderDisplay: false}，目的是启用MainCtrl Controller 共享相同的模型数据。没关系。
在没有看到您的代码的情况下，我的猜测是问题在于您如何在 ng-click 上切换 data.searchHeaderDisplay。当您应该将值分配给它们的父范围级别时，您可能已经在子范围级别(即对应于 MainCtrl Controller 的范围)设置了 data.searchHeaderDisplay。如果您需要我详细说明，请告诉我。
更新:
查看提供的代码后，问题确实如我之前(上文)所怀疑的那样。
mainProductSearch() 是需要更改的内容。代替 scope.data.searchHeaderVisible = true;，您需要 scope.$parent.data.searchHeaderVisible = true，原因在前面已简要说明。如果您仍然不清楚背后的原理，那么您可能需要熟悉AngularJS 作用域(和/或一般的 Javascript 对象)的原型(prototype)继承链。范围原型(prototype)继承是 AngularJS 的重要组成部分。 Here is a great article on the topic .
关于javascript - 如何让两个 Controller 在 Angular 中执行相同的操作，但改变网站的视觉方面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16049234/