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> 

Answer 2

首先，我不知道它是否对您有用。

您可以使用本地存储。

通过使用此功能，可以在任何控制器中访问相同的数据

这是一个示例，它如何为我工作。

app.controller("loginCtrl", function($scope, $window){
$scope.submit = function(){
    $window.localStorage.setItem = ("username", $scope.username);
    };
 });

app.controller("homeCtrl", function($scope, $window){
$scope.logout = function(){
    $window.localStorage.getItem = ("username");
    };
 });