AngularJS - 在两个控制器之间共享数据的正确方法

Question

我想了解如何在AngularJS中的两个或更多控制器之间共享一些数据.

现在我只是处理两个控制器,但将来我会有更多的控制器也想要使用这些相同的数据.现在我有一个navigation-controller控制side navigation和header.为了便于理解,让我们说第二个控制器被调用content-controller,它负责处理所有内容.

我想根据用户搜索的内容动态加载内容,搜索栏位于侧面导航中,因此searchTerm两个控制器都需要访问它.在将来,我还将实现一些其他可能需要访问此searchTerm的功能.

就HTML结构而言,它content-controller位于内部navigation-controller.

我的第一个想法是searchTerm通过坚持将其全球化$rootScope,但我不确定这是否是一种有效/安全的方式.

我的第二个想法是采取搜索方面,并把它们放入service.在这个服务中,我会放置与API对话的函数,以获得必要的数据.这意味着在搜索栏上,我可以让submit search按钮访问service并运行类似的东西FooService.update(searchTerm).

你认为处理这种情况的最佳方法是什么？

Answer 1

控制器之间共享数据一直是一项突出的要求.你有几个选择:

1. 厂
2. 服务

您可以参考此答案,了解有关差异的更多详细信息.

使用服务肯定是更好的选择,因为你不会使用额外的变量来污染根范围[这些数量注定会像你们已经提到的那样增长].

将数据存储在服务中并在控制器和HTML中轻松访问它们的可能方法可以描述为:

1. 创建一个服务,它将包含所有模型变量.

   angular.service("dataService", function() {
   
       this.value1 = "";
       this.value2 = "";
   });
   

2. 在控制器中引用该服务,在范围中保存它们的引用.

   angular.controller("myCntrl1", function($scope, dataService) {
       $scope.dataService = dataService;
   });
   
   
   angular.controller("myCntrl2", function($scope, dataService) {
       $scope.dataService = dataService;
   });
   

3. 现在在你的html中,你使用服务引用引用所有的模态变量:

       // Controller 1 view
       <div ng-controller="myCntrl1">
           <input type="text" ng-model="dataService.value1" />
       </div>
   
       // Controller 2 view
       <div ng-controller="myCntrl2">
           The value entered by user is {{dataService.value1}}
       </div>