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

我有控制器A将一些数据发送到共享服务和控制器B，应该读取该数据。问题是控制器B在控制器A的不同页面上（在同一网站上），即，我确实没有。在控制器A上，单击按钮（将数据发送到服务）并打开另一个页面，其中控制器B应该从服务读取数据。但是没有任何反应，所以我的问题是控制器可以在不同的页面上进行通信吗？Angularjs不同选项卡中的控制器之间的通信

这里是我想做到这一点，但没有运气：

服务：

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的相关部分：控制器B的

publicApp.angularModule.controller('PublicRoutinesCtrl', function ($scope, $rootScope, routinesService, controllerCommunicationService, bootstrapCarouselService) { 


    $scope.goToNextScreen = function() { 
     var currentIndex = bootstrapCarouselService.getcurrentSlideIndex(); 
     controllerCommunicationService.setDataForBroadcast($scope.items[currentIndex].Routine.RoutineId); 



    };

相关部分：

$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");未被解雇。

来源

2013-10-09 hyperN

那么还有两种其他方式可以在选项卡之间进行通信。通过全球域的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

来源

2015-01-14 13:51:28

根据您的问题

我的问题是在不同的页面控制器可以这种方式交流？

答案是否定的。对于这个问题，Angular和JavaScript并不是那样设计的。

如果您在同一页面上表示不同的意见，那么可以，您可以使用服务。服务是单身，并保存在同一页面上的控制器之间的数据。

如果你真的想从一个页面发送数据到另一个页面，你的选择是通过查询字符串（在URL上）或发布数据，或者如果你只支持现代浏览器，那么你可以使用客户端本地存储（http://www.w3schools.com/html/html5_webstorage.asp）

来源

2013-10-09 11:50:18 Anton

更多的FYI不是一个解决方案，但如果您将'controllerCommunicationService.setDataForBroadcast（）'放在$ timeout中足够的延迟，只要目标页面有足够的时间加载，代码就可以工作。虽然绝对不可靠。 – Lavamantis

$rootScope.$broadcast是控制器之间进行通信的完全可以接受的方式，但是由于您在整个页面上使用它不起作用。这是因为当您拨打broadcast时，其他控制器未加载，因此它的方法不会被触发。但由于你的服务有data你可以直接通过注射服务为其他控制器访问和访问它的data财产

controllerCommunicationService.data随时随地你想的那么不需要使用on方法的属性。

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

来源

2013-10-09 12:17:43 Chandermani

我假设当你在选项卡之间跳转时，不幸的是你正在重新加载整个页面 - 不要这样做。而是使用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控制器和服务，那么它也不应该是一个使用$路由的问题。 :-)

来源

2013-10-09 13:47:52 codef0rmer

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

回答

相关问题