विभिन्न टैब में नियंत्रकों के बीच कोणीय संचार

Question

मेरे पास नियंत्रक ए है जो साझा डेटा और नियंत्रक बी को कुछ डेटा भेजता है जिसे उस डेटा को पढ़ना चाहिए। समस्या नियंत्रक बी नियंत्रक ए की तुलना में एक अलग पृष्ठ (एक ही वेबसाइट पर) पर है, यानी मैं smth करता हूँ। नियंत्रक ए पर, क्लिक बटन (जो सेवा को डेटा भेजता है) और एक और पेज खोलें जहां नियंत्रक बी है जो सेवा से डेटा पढ़ना चाहिए। लेकिन कुछ नहीं होता है, तो मेरा सवाल यह है कि विभिन्न पृष्ठों पर नियंत्रक इस तरह से संवाद कर सकते हैं?

यहाँ कैसे मैं इसे करने की कोशिश की है, लेकिन कोई भाग्य के साथ:

सेवा:

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

नियंत्रक एक के प्रासंगिक भागों:

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"); निकाल दिया नहीं गया है।

Answer 1

वैसे वहाँ भी टैब के बीच संवाद करने के लिए दो अन्य तरीके हैं। वैश्विक डोमेन के साथ कुकीज़ के माध्यम से, जिसे सुरक्षित नहीं माना जाता है।

या postMessage साथ:

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

डेमो:

http://html5demos.com/postmessage2

और ब्राउज़र समर्थन: FYI एक समाधान की तुलना में एक की

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

Answer 2

अपने प्रश्न के आधार पर

मेरे सवाल का विभिन्न पृष्ठों पर नियंत्रक इस तरह संवाद कर सकते हैं क्या है?

उत्तर नहीं है। उस मामले के लिए कोणीय और जावास्क्रिप्ट इस तरह से डिजाइन नहीं किए गए हैं।

यदि आप एक ही पृष्ठ पर अलग-अलग विचारों का मतलब रखते हैं, तो हाँ, आप एक सेवा का उपयोग कर सकते हैं। सेवाएं एकल हैं और एक ही पृष्ठ पर रखे जाने पर अपने डेटा को नियंत्रकों में रखते हैं।

यदि आप वास्तव में एक पृष्ठ से दूसरे पृष्ठ पर डेटा भेजना चाहते हैं तो आपके विकल्प इसे क्वेरीस्ट्रिंग (यूआरएल पर) या डेटा पोस्ट करने के माध्यम से करना है, या यदि आप केवल आधुनिक ब्राउज़र का समर्थन कर रहे हैं तो आप क्लाइंट साइड का उपयोग कर सकते हैं स्थानीय भंडारण (http://www.w3schools.com/html/html5_webstorage.asp)

Answer 3

$rootScope.$broadcast नियंत्रक के बीच संवाद करने का एक पूरी तरह से स्वीकार्य तरीका है, लेकिन चूंकि आप पूरे पृष्ठ का उपयोग कर रहे हैं, यह काम नहीं करेगा। ऐसा इसलिए है क्योंकि जब आप broadcast कॉल करते हैं तो अन्य नियंत्रक को लोड नहीं किया जाता है और इसलिए on विधि को निकाल दिया नहीं जाता है। लेकिन आपकी सेवा एक संपत्ति data आप सीधे अन्य नियंत्रक में सेवा इंजेक्शन लगाने के द्वारा उस तक पहुँच और यह data संपत्ति

controllerCommunicationService.data किसी भी समय है और कहीं भी आप ऐसा on विधि का उपयोग कर के लिए कोई ज़रूरत नहीं चाहते का उपयोग कर सकते है के बाद से।

जैसा कि @ एंटन द्वारा समझाया गया है, आप querystring \ url fragements और क्लाइंट स्टोरेज का उपयोग करके डेटा भी पास कर सकते हैं।

Answer 4

मुझे लगता है कि जब आप टैब के बीच कूदते हैं, तो आप दुर्भाग्य से पूरे पृष्ठ को पुनः लोड कर रहे हैं - ऐसा मत करें। इसके बजाय एक अच्छी रूटिंग सेट करने के लिए 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 का उपयोग नहीं करना चाहते हैं तो स्थानीय स्टोरेज, इंडेक्सडीबी इत्यादि का उपयोग करके डेटा को बनाए रखने के लिए अपनी सेवा में एक तर्क लिखें।

जहां तक ​​मैं देख सकता हूँ, आप कोणीय नियंत्रकों और सेवाओं का उपयोग कर रहे हैं तो यह भी $ मार्गों का उपयोग कर एक समस्या नहीं होनी चाहिए। :-)