使用Angular服务在控制器之间共享数据
使用Angular服务在控制器之间共享数据
我正在尝试让两个不同的控制器彼此通信。
控制器1
function WelcomeCtl($scope, emailService) {
$scope.save=function(){
emailService.saveEmail('Hi');
}
}
WelcomeCtl.$inject = ['$scope', 'emailService'];
这个控制器的设计是从一个文本字段（使用ng-model = 'email'）中获取文本，并将文本放入一个服务（emailService）中，以便在下一个ng-view（由下一个控制器控制）中使用。
//出于测试目的，我只是直接将“Hi”放入saveEmail函数中
控制器2
function SignupCtl($scope, emailService) {
window.alert(emailService.getEmail());
}
SignupCtl.$inject = ['$scope', 'emailService'];
出于测试目的，我使用window.alert来显示getEmail()的值。
emailService
angular.module('myApp.services', [])
.service('emailService', function (){
var text = "start value";
return{
saveEmail:function (data){
text = data;
},
getEmail:function (){
return text;
}
};
});
由于使用了指定的Controller1和Controller2以及这个服务，window.alert打印出的是“start value”，而不是'Hi'。
当我在代码中添加更多的window.alert函数以查看发生了什么时，我发现当调用save()时，Controller1被执行并将一个值保存到服务中，然后express.js加载下一页。然后激活Controller2。当Controller2激活时，它重新初始化了服务，将text设置为“start value”。然后当调用getEmail时，它返回值“start value”。
这让我困惑，因为我以为服务在每次包含在控制器中时都不会被初始化。
参考资源。
Better design for passing data to other ng-view's and persisting it across controllers
我还在使用angular-express-seed
问题的出现原因是Angular.js只能在单个页面上工作和保留数据。如果页面重新加载，它会重新初始化所有内容。
解决方法有两种：
1. 可以查看如何使用Angular.js的路由功能，使得页面保持在同一个页面上。
2. 可以使用一些持久化数据的方法，例如使用localstorage。了解更多信息可以参考：http://diveintohtml5.info/storage.html
感谢你的建议！我之前以为只是在两个ng-view之间切换，所以Angular不需要重新加载，但实际上我确实在切换页面。现在我改成只切换视图，一切都运行得很完美。谢谢！
非常感谢！我一直在寻找Angular路由的替代方案！
在这个视频中，作者通过一个简单的方式解释了使用Angular服务在控制器之间共享数据的问题。这个问题的出现原因是在AngularJS中，每个控制器都有自己的作用域，无法直接访问其他控制器的数据。这导致了在一个控制器中修改的数据无法在其他控制器中共享和使用的问题。
为了解决这个问题，作者介绍了使用Angular服务的方法。Angular服务是一个可注入的对象，可以在不同的控制器之间共享数据和功能。作者在视频中展示了如何创建一个简单的Angular服务，并在多个控制器中使用它来共享数据。
首先，作者创建了一个名为"DataService"的Angular服务。这个服务有一个属性"data"，用于存储要共享的数据。然后，作者在两个不同的控制器中注入了这个服务，并分别在控制器中使用"data"属性来读取和修改共享的数据。
通过这种方式，作者成功地解决了在控制器之间共享数据的问题。通过使用Angular服务，可以在不同的控制器中共享数据，并且修改后的数据在其他控制器中也是可见的。
这个视频以简单明了的方式解释了使用Angular服务在控制器之间共享数据的问题，并提供了一种解决方法。通过使用Angular服务，可以轻松地在不同的控制器之间共享数据和功能，提高了AngularJS应用程序的灵活性和可扩展性。