AngularJS:如何在同一个2个控制器的多个实例之间提供独立的通信

AngularJS: How to provide independent communication between multiple instances of the same 2 controllers?

本文关键字：之间 实例 通信 独立 AngularJS 同一个 控制器 2个      更新时间：2023-09-26

我有两个控制器分配给两个视图：

[ResultsView ng controller="ResultsCtrl"][SearchView ng controller="SearchCtrl"]

搜索视图有许多复杂的过滤器/选项，由用户填写，然后他/她可以在搜索视图上按"搜索"，结果应填充到网格中。

现在，我可以通过Service或使用$rootScope在两者之间发送信息$广播。

这是我遇到的问题：

[ResultView ng controller="ResultsCtrl"][SearchView ng controller="SearchCtrl"][strong>[ResultView ng controller="ResultsCtrl"][SearchView ng controller="SearchCtrl"][strong>[ResultView ng controller="ResultsCtrl"][SearchView ng controller="SearchCtrl"][strong>

如果我在同一页面上有多个结果搜索部分，我如何确保它们各自独立行动？使用Service方法，ResultsCtrl和SearchCtrl都具有已定义的服务

.controller("searchCtrl", ["$scope", "$searchHttp", function ($scope, $searchHttp) {
.controller("resultsCtrl", ["$scope", "$searchHttp", function ($scope, $searchHttp) {

因此，我无法更改控制器的每个实例在服务方面的行为方式。一旦一个SearchCtrl调用该服务，它就会修改每个ResultsCtrl

同样使用广播$rootScope$broadcast（"searchResults"…将被每个ResultsCtrl实例拾取。

那么，最好的办法是什么呢？我想重用结果和搜索视图代码，因为它基本上是相同的。但我需要在同一页上独立地渲染每一对几次。

我认为您需要的HTML结构是这样的。

<!--First-->
<div ng-controller="SearchCtrl">
    <div ng-controller="ResultsCtrl">
    </div>
</div>
<!--Second-->
<div ng-controller="SearchCtrl">
    <div ng-controller="ResultsCtrl">
    </div>
</div>

此HTML结构将帮助您独立使用在ResultsCtrl中创建的父级SearchCtrl的搜索结果。

jsfiddle来了。我希望这能对你有所帮助

相关文章：