不同选项卡中控制器之间的Angularjs通信[重复]

Posted 2023-02-21

技术标签:

【中文标题】不同选项卡中控制器之间的Angularjs通信[重复]【英文标题】：Angularjs communication between controllers in different tabs [duplicate] 【发布时间】：2013-10-16 17:56:01 【问题描述】：

我有控制器 A 向共享服务发送一些数据，控制器 B 应该读取该数据。问题是控制器 B 与控制器 A 位于不同的页面（在同一网站上），即我这样做。在控制器 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"); 也没有被解雇。

【问题讨论】：

【参考方案1】：

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

或使用 postMessage：

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

【讨论】：

【参考方案2】：

我假设当您在选项卡之间跳转时，很遗憾您正在重新加载整个页面 - 不要那样做。而是使用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 也不应该有问题。 :-)

【讨论】：

【参考方案3】：

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

controllerCommunicationService.data随时随地随心所欲，无需使用on方法。

正如@Anton 所解释的，您还可以使用 querystring\url 片段和客户端存储来传递数据。

【讨论】：

【参考方案4】：

根据您的问题