Giao tiếp Angularjs giữa các bộ điều khiển trong các tab khác nhau

Question

Tôi có bộ điều khiển A gửi một số dữ liệu đến dịch vụ chia sẻ và bộ điều khiển B để đọc dữ liệu đó. Vấn đề là Bộ điều khiển B nằm trên một trang khác (trên cùng một trang web) so với bộ điều khiển A, tức là tôi làm điều đó. trên bộ điều khiển A, nút bấm (gửi dữ liệu đến dịch vụ) và mở một trang khác có bộ điều khiển B để đọc dữ liệu từ dịch vụ. Nhưng không có gì xảy ra, do đó, câu hỏi của tôi là có thể điều khiển trên các trang khác nhau giao tiếp theo cách này?

Sau đây là cách tôi đã cố gắng để làm điều đó nhưng không có may mắn:

dịch vụ:

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; 
}); 

phần có liên quan của bộ điều khiển 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); 



    }; 

phần có liên quan của bộ điều khiển 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); 
     }); 
    }); 

Và thậm chí console.log("TEST"); không bị sa thải.

Answer 1

Cũng có hai cách khác để giao tiếp giữa các tab. Thông qua cookie với tên miền toàn cầu, không được khuyến nghị là không an toàn.

Hoặc với postMessage:

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

Demo:

http://html5demos.com/postmessage2

Và hỗ trợ trình duyệt:

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

Answer 2

dựa trên câu hỏi của bạn

câu hỏi của tôi là bộ điều khiển trên các trang khác nhau có thể giao tiếp theo cách này ?

Câu trả lời là không. Góc cạnh và javascript cho vấn đề đó không được thiết kế như thế.

Nếu tuy nhiên bạn có nghĩa là các chế độ xem khác nhau trên cùng một trang, thì có, bạn có thể sử dụng dịch vụ. Dịch vụ là những người độc thân và giữ dữ liệu của họ trên các bộ điều khiển khi được lưu trên cùng một trang.

Nếu bạn thực sự muốn gửi dữ liệu từ trang này sang trang khác, tùy chọn của bạn là thực hiện qua chuỗi truy vấn (trên url) hoặc đăng dữ liệu hoặc nếu bạn chỉ hỗ trợ các trình duyệt hiện đại thì bạn có thể sử dụng phía máy khách lưu trữ cục bộ (http://www.w3schools.com/html/html5_webstorage.asp)

Answer 3

$rootScope.$broadcast là một cách hoàn toàn chấp nhận được để liên lạc giữa bộ điều khiển, nhưng vì bạn đang sử dụng trên trang, nó sẽ không hoạt động. Điều này là do khi bạn thực hiện lệnh gọi broadcast, bộ điều khiển kia sẽ không được nạp và do đó phương thức on không bị kích hoạt. Nhưng kể từ khi dịch vụ của bạn có một tài sản data bạn có thể trực tiếp truy cập vào nó bằng cách tiêm dịch vụ vào bộ điều khiển khác và truy cập nó data tài sản

controllerCommunicationService.data mọi lúc mọi nơi bạn muốn vì vậy không cần thiết phải sử dụng phương pháp on.

Như được giải thích bởi @Anton, bạn cũng có thể chuyển dữ liệu bằng cách sử dụng chuỗi truy vấn \ url và lưu trữ ứng dụng khách.

Answer 4

Tôi giả sử khi bạn chuyển giữa các tab, rất tiếc bạn sẽ tải lại toàn bộ trang - Không làm điều đó. Thay vào đó, hãy sử dụng routeProvider để thiết lập định tuyến tốt đẹp.

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'}); 
}); 

Sau đó, phần còn lại của mã sẽ làm việc và giữ lại dữ liệu được chia sẻ được dịch vụ lưu trữ ngay cả khi bạn chuyển tab. Trong trường hợp, bạn không muốn sử dụng $routeProvider sau đó viết một logic trong dịch vụ của bạn để duy trì dữ liệu bằng cách sử dụng localStorage, indexDB, v.v.

Theo như tôi thấy, bạn đang sử dụng bộ điều khiển góc và dịch vụ thì nó cũng không phải là vấn đề khi sử dụng các tuyến $. :-)