4

我想在 Angular 中复制 Google 的主页功能，这让我很伤心。我浏览了 Egghead 的视频并阅读了整个 API，但没有具体的例子说明这种确切的行为。我想做的是以下几点：

  • 用户来到主页，出现主搜索栏和通用黑色标题栏
  • 用户搜索某些东西，只有当他按下“搜索”时，主搜索栏才会消失，url 变为 mysite.com/q/searchTerm 并且一个新的子标题出现在黑色标题栏下方，就像谷歌的主页一样，删除主搜索字段并放置在主标题栏下方的灰色栏中（如果您关闭了即时搜索）
  • 搜索结果出现在现在消失的主搜索栏的位置，就像谷歌一样，但这部分我可以处理路线和视图。两个相同控制器之间的布局切换让我很困扰。

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

  • 为两个 MainCtrl 子控制器创建一个父控制器，并设置其 scope.data = {searchHeaderDisplay: false}
  • 让两个子控制器共享相同的名称 (MainCtrl)，因为它们共享完全相同的功能
  • 在标题栏中制作一个 ng-show="data.searchHeaderDisplay" 和主要的 ng-hide="data.searchHeaderDisplay" 然后尝试在搜索按钮的 ng-click 上切换 data.searchHeaderDisplay。这不起作用 - 没有产生任何效果。

我还在接受 AngularJS，所以我确信它很简单，我只需要一个或两个实际示例来学习。

编辑：将辅助标题（具有较小的搜索字段）与搜索结果一起推入单独的视图模板会更好吗，并且只将根视图作为主要搜索字段？该文档对有关视图和路由的最佳实践非常松懈，尤其是将有多个控制器执行某些操作的路由。

4

2 回答 2

3

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

需要影响此模型的控制器可以注入服务。这具有额外的优势，即依赖关系清晰（与控制器 $scope 继承相比，依赖关系不清晰）。例如，当用户按下“搜索”时，控制器可以调用服务上定义的通知方法： searchService.newSearchTerm(searchTerm)。现在，所有正在观察模型变化的视图（如标题视图）都会注意到变化并可以相应地更新。

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

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

于 2013-04-17T16:29:57.593 回答
3

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

在没有看到您的代码的情况下，我的猜测是问题在于您如何打开data.searchHeaderDisplayng-click。当您应该将值分配给它们的父范围级别时，您可能已经data.searchHeaderDisplay在子范围级别（即与控制器对应的范围）进行了设置。MainCtrl如果您需要我详细说明，请告诉我。

更新：

查看提供的代码后，问题确实如我之前所怀疑的那样（上图）。

mainProductSearch()是需要改变的。代替scope.data.searchHeaderVisible = true;，您需要scope.$parent.data.searchHeaderVisible = true前面简要解释的原因。如果您仍然不清楚背后的基本原理，那么您可能需要熟悉AngularJS 范围（和/或一般的 Javascript 对象）的原型继承链。范围原型继承是 AngularJS 的重要组成部分。这是一篇关于该主题的精彩文章。

于 2013-04-17T00:21:00.920 回答