不同选项卡中控制器之间的 Angularjs 通信

Angularjs communication between controllers in different tabs

本文关键字：之间 Angularjs 通信 控制器 选项      更新时间：2023-09-26

我有控制器A，它将一些数据发送到共享服务，控制器B应该读取该数据。问题是控制器 B 与控制器 A 位于不同的页面上(在同一网站上(，即我做 smth。在控制器 A 上，单击按钮(将数据发送到服务(并打开另一个页面，其中控制器 B 应从服务读取数据。但是什么也没发生，所以我的问题是不同页面上的控制器可以这样通信吗？

以下是我尝试这样做但没有运气的方法：

服务：

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上(或发布数据来完成，或者如果你只支持现代浏览器，那么你可以使用客户端本地存储(http://www.w3schools.com/html/html5_webstorage.asp(

那么，还有另外两种方式可以在选项卡之间进行通信。通过具有全局域的cookie，不建议这样做，因为不安全。

或者用帖子消息：

https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage?redirectlocale=en-US

演示：

http://html5demos.com/postmessage2

和浏览器支持：

http://caniuse.com/#feat=x-doc-messaging

我假设当您在选项卡之间跳转时，不幸的是，您正在重新加载整个页面 - 不要这样做。相反，请使用 routeProvider 来设置一个很好的路由。

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 等来持久化数据。

据我所知，您正在使用Angular控制器和服务，那么使用$routes也应该不是问题。

$rootScope.$broadcast 是控制器之间完全可以接受的通信方式，但由于您跨页面使用，因此它不起作用。这是因为当您执行broadcast调用时，另一个控制器未加载，因此on方法不会被触发。但是，由于您的服务具有属性data您可以通过将服务注入另一个控制器并访问它data属性来直接访问它。

controllerCommunicationService.data随时随地，因此无需使用on方法。

如 @Anton 所述，您还可以使用 querystring''url fragements 和客户端存储来传递数据。

相关文章：