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

Question

I have two controllers allocated to two views:

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

The Search View has many complex filters/options and is filled in by the user, then he/she can press "Search" on SearchView and Results should be populated into a Grid.

Now I can send information between two either by a Service or by using $rootScope.$broadcast .

---

Heres the problem I've run into:

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

If I were to have multiple Result-Search sections on the same page, how can I ensure they each act independently from each other? Using the Service approach, the ResultsCtrl and SearchCtrl both have the defined service

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

So I can't change how each instance of the controller behaves regarding the service. Soon as one SearchCtrl calls the service, it will modify every ResultsCtrl instance.

Likewise using broadcasts $rootScope.$broadcast("searchResults"... will be picked up by every ResultsCtrl instance.

So whats the best way around this? I want to reuse the Results and Search View code since its basically the same. But I need to render each pair independently on the same page a few times.

Answer 1

I think the HTML structure you need is something like this.

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

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

This HTML structure would help you to use independently the search results one's parent SearchCtrl created in ResultsCtrl.

jsfiddle is here. I hope this would help you. :)