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不同選項卡中的控制器之間的通信

回答

相關問題