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

hyp*_*erN 9 javascript angularjs

我有控制器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;
});
Run Code Online (Sandbox Code Playgroud)

控制器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);



    };
Run Code Online (Sandbox Code Playgroud)

控制器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);
        });
    });
Run Code Online (Sandbox Code Playgroud)

甚至console.log("TEST");没有解雇.

Ant*_*ton 7

根据你的问题

我的问题是,不同页面上的控制器可以这种方式通信吗

答案是不.Angular和javascript就是这样设计的.

但是,如果您在同一页面上表示不同的视图,那么是的,您可以使用服务.服务是单例,并在保持在同一页面上时将数据保存在控制器上.

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


Seb*_*ski 5

标签之间还有两种其他的通信方式。通过具有全局域的cookie,不建议这样做,因为它不安全。

或使用postMessage:

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

演示:

http://html5demos.com/postmessage2

和浏览器支持:

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