Javascript 不同选项卡中控制器之间的Angularjs通信
我有控制器A向共享服务发送一些数据,控制器B应该读取这些数据。问题是控制器B与控制器a位于不同的页面(在同一个网站上),即我执行smth。在控制器A上,单击按钮(将数据发送到服务)并打开另一个页面,其中是控制器B,它应该从服务读取数据。但是什么也没发生,所以我的问题是不同页面上的控制器是否可以通过这种方式进行通信 下面是我如何尝试但没有运气的: 服务:Javascript 不同选项卡中控制器之间的Angularjs通信,javascript,angularjs,Javascript,Angularjs,我有控制器A向共享服务发送一些数据,控制器B应该读取这些数据。问题是控制器B与控制器a位于不同的页面(在同一个网站上),即我执行smth。在控制器A上,单击按钮(将数据发送到服务)并打开另一个页面,其中是控制器B,它应该从服务读取数据。但是什么也没发生,所以我的问题是不同页面上的控制器是否可以通过这种方式进行通信 下面是我如何尝试但没有运气的: 服务: publicApp.angularModule.service('controllerCommunicationService', functi
publicApp.angularModule.service('controllerCommunicationService', function ($rootScope) {
var communicationService = {};
communicationService.data = null;
communicationService.setDataForBroadcast = function(data) {
this.data = data;
this.broadcastData();
};
communicationService.broadcastData = function() {
$rootScope.$broadcast('handleBroadcast');
};
return communicationService;
});
控制器A的相关部分:
publicApp.angularModule.controller('PublicRoutinesCtrl', function ($scope, $rootScope, routinesService, controllerCommunicationService, bootstrapCarouselService) {
$scope.goToNextScreen = function() {
var currentIndex = bootstrapCarouselService.getcurrentSlideIndex();
controllerCommunicationService.setDataForBroadcast($scope.items[currentIndex].Routine.RoutineId);
};
控制器B的相关部分:
$rootScope.$on('handleBroadcast', function () {
console.log("TEST");
$http.post("/EditWorkout/PostRoutineId", { routineId: controllerCommunicationService.data })
.success(function() {
console.log("success");
})
.error(function (responseData) {
console.log("Error !" + responseData);
});
});
甚至console.log(“TEST”)代码>未被激发。基于您的问题
我的问题是,不同页面上的控制器能否以这种方式进行通信
?
答案是否定的。Angular和javascript并不是这样设计的
但是,如果您是指同一页面上的不同视图,则可以使用服务。服务是单例的,当保持在同一页上时,它们的数据跨控制器保存
如果您真的想将数据从一个页面发送到另一个页面,您可以选择通过查询字符串(在url上)或发布数据,或者如果您只支持现代浏览器,那么您可以使用客户端本地存储()
是控制器之间完全可以接受的通信方式,但由于您使用的是跨页面的,所以它无法工作。这是因为当您执行广播
调用时,另一个控制器未加载,因此它的打开
方法不会被触发。但是,由于您的服务有一个属性数据
,您可以通过将服务注入另一个控制器直接访问它,并访问它的数据
属性
controllerCommunicationService.data
可随时随地使用,因此无需在
方法上使用
正如@Anton所解释的,您还可以使用querystring\url fragements和客户端存储传递数据 我假设当您在选项卡之间跳转时,很不幸您正在重新加载整个页面-不要这样做。而是使用设置一个好的路由
var App = angular.module('App', []);
App.config(function($routeProvider) {
$routeProvider.when('/tab1', {templateUrl: 'views/tab1.html'});
$routeProvider.when('/tab2', {templateUrl: 'views/tab2.html'});
$routeProvider.otherwise({redirectTo: '/tab1'});
});
然后,即使在切换选项卡时,代码的其余部分也会工作并保留服务存储的共享数据。在这种情况下,您不想使用$routeProvider
,然后在服务中编写一个逻辑,使用localStorage、indexDB等保存数据
就我所见,您使用的是角度控制器和服务,那么使用$routes也不会有问题。:-) 标签之间还有两种其他的沟通方式。通过具有全局域的Cookie,不建议将其视为不安全
或使用postMessage:
演示:
和浏览器支持:
仅供参考,而不是解决方案,但是如果您将“controllerCommunicationService.setDataForBroadcast()”放入$timeout中,并有足够的延迟,那么只要目标页面有足够的时间加载,您的代码就可以工作。但绝对不可靠。