如何在Angular中让两个控制器执行相同的操作，但改变站点的视觉效果

How to make two controllers perform same action in Angular, but change visual aspect of site?

本文关键字：操作 改变 视觉 站点 执行 控制器 Angular 两个      更新时间：2023-09-26

我想在Angular中复制Google的主页功能，但这让我很苦恼。我已经看了Egghead的视频并阅读了整个API，但没有特定的例子来说明这种行为。我希望它做的是:

  • 用户进入主页，显示主搜索栏和通用的黑色标题栏
  • 用户搜索某些东西，只有当他按下"搜索"时，主搜索栏才会消失，url更改为mysite.com/q/searchTerm，新的子标题出现在黑色标题栏下，就像谷歌的主页一样，主搜索字段被删除并放置在主标题栏下的灰色栏中(如果你有即时搜索关闭)
  • 搜索结果出现在现在消失的主搜索栏的位置，就像谷歌一样，但这部分我可以处理路由和视图。两个相同的控制器之间的布局切换是困扰我的。

到目前为止我试过的是:

  • 为两个MainCtrl子控制器创建父控制器，并设置其作用域。data = {searchHeaderDisplay: false}
  • 让两个子控制器共享相同的名称(MainCtrl)，因为它们共享完全相同的功能
  • 使标题栏中的ng-show="data "。searchHeaderDisplay"和主要的ng-hide="数据"。searchHeaderDisplay"，然后尝试切换数据。搜索头显示在点击搜索按钮。

我还在学习AngularJS，所以我相信它很简单，我只需要一两个实际的例子来学习。

编辑:将次要标题(与较小的搜索字段)与搜索结果一起推入单独的视图模板，并且仅将根视图作为主要搜索字段会更好吗?文档对视图和路由的最佳实践非常宽松，尤其是那些有多个控制器的路由。

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

没有看到你的代码，我的猜测是，问题在于你如何切换data.searchHeaderDisplay在ng-click。您可以在子作用域级别设置data.searchHeaderDisplay(例如:(与MainCtrl控制器对应的范围)，当您应该将值分配给它们的父范围级别时。如果您需要我详细说明，请告诉我。

更新:

查看所提供的代码后，问题确实与我之前(上面)所怀疑的一样。

mainProductSearch()是需要改变的。由于前面简要说明的原因，您需要scope.$parent.data.searchHeaderVisible = true而不是scope.data.searchHeaderVisible = true;。如果你仍然不清楚背后的原理，那么你可能需要熟悉AngularJS作用域(和/或Javascript对象)的原型继承链。作用域原型继承是AngularJS的重要组成部分。

而不是AppCtrl(本质上就像$rootScope)，并使用$parent(这是一个脆弱的解决方案，因为改变HTML结构可能会导致这打破-例如，你可能会发现你需要使用$parent.$parent...，如果你添加一个中间的ng控制器)，我建议一个服务来存储与你的头相关的模型数据。我们叫它searchService。

需要影响该模型的控制器可以注入服务。这还有一个额外的好处，那就是依赖关系是清晰的(与controller $scope继承相比，后者的依赖关系是不清晰的)。例如，当用户按下"search"时，控制器可以调用服务上定义的通知方法:searchService.newSearchTerm(searchTerm)。现在，所有监视模型变化的视图(如标题视图)都将注意到变化，并可以相应地更新。

您可以考虑使用ng-view作为页面的主要内容区域。

参见https://stackoverflow.com/a/14619122/215945，那里讨论了一个非常相似的布局。在那个SO帖子中，标题中有一个带有商品计数的购物篮。item count需要被多个控制器更新，所以我们把它放到一个service中。

相关文章：