2013-08-15 16 views
10

मेरा लक्ष्य एक कोणीय नियंत्रक से दूसरे डेटा को दूसरे डेटा भेजना है।कोणीय, प्रसारण नहीं कर रहा

यहाँ नियंत्रक जो datas भेजने के लिए है:

<body ng-app="myApp"> 
    <div ng-controller="MapCtrl"> 
     //everything OK here 
    </div> 

    <div ng-controller="ExcelViewCtrl"> 
     <table> 
     <thead> 
      <tr> 
       <th ng-repeat="col in ExcelCols">{{col}}</th> 
      </tr> 
     </thead> 
     </table>   
    </div> 

</body> 
+0

नियंत्रक कैसे तत्काल हैं? 'ExcelViewCtrl' और' MapCtrl' के दायरे के बच्चे हैं? '$ प्रसारण' और' $ emit' के बीच का अंतर देखें। –

+0

शायद मैं उस बिंदु को गलत समझा। मुझे लगता है कि माता-पिता को एक संदेश भेजने के लिए $ emit का उपयोग किया जाता है, और प्रत्येक नियंत्रक –

उत्तर

15

पर निर्भर करता:

myApp.controller('MapCtrl', ['$scope', '$http', function ($scope, $http) { 
    $scope.loadData = function() { 
     $http.get('/map/GetListDB').success(function (data, status, headers, config) { 

      //Logic here is working fine, it creates a table named "ExcelCols" which is a table of strings 

      $scope.$broadcast("SET_EXCEL_TITLES", $scope.ExcelCols); 
     }) 
    } 

}]); 

यहाँ दूसरे नियंत्रक

myApp.controller('ExcelViewCtrl', ['$scope', '$http', function($scope, $http) { 
    $scope.$on("SET_EXCEL_TITLES", function (event, excelCols) { 

     //this event is never fired 

     $scope.ExcelCols = excelCols; 
    }); 
}]); 

मेरा विचार है कि जिस तरह से डिजाइन किया गया है कंट्रोलर को $broadcast संदेश पर संरचित wrt कैसे रूट किया जाएगा।

प्रति documentation

के रूप में श्रोताओं पर सभी बच्चे स्कोप (और उनके बच्चों) पंजीकृत एनजी को अधिसूचित करने के लिए नीचे की ओर एक घटना नाम डिस्पैच। $ RootScope.Scope # $।

इसका मतलब है कि प्रसारण भेजने वाले नियंत्रक को बाल नियंत्रक एचटीएमएल के मूल एचटीएमएल पर परिभाषित किया जाना चाहिए।

अपनी एचटीएमएल संरचना के आधार पर, $rootScope.$broadcast का उपयोग करें। $rootScope को MapCtrl में इंजेक्ट करें और उस पर $broadcast विधि को कॉल करें।

6

मुझे लगता है कि आपको $scope.$broadcast के बजाय $rootScope का उपयोग करने की आवश्यकता है। साझा सेवा का उपयोग संचार के साथ

उदाहरण: नियंत्रकों के बीच संचार - JSFiddle

3

में अच्छा उदाहरण देखें नीचे AngularJS के लिए उदाहरण हैं।

http://jsfiddle.net/simpulton/XqDxG/

"ControllerZero" Broadcast to "ControllerOne" and "ControllerTwo" 

और वीडियो ट्यूटोरियल

http://onehungrymind.com/angularjs-communicating-between-controllers/

+0

पर कुछ भेजने के लिए प्रसारण प्रसार प्रेरणा के लिए धन्यवाद। मैंने एक अधिसूचना सेवा बनाई है जो अब ऐप में सभी अधिसूचनाओं को संभालती है। कोड बहुत साफ रखता है ... धन्यवाद – rahul

0

एक अन्य विकल्प $ rootScope उपयोग करने के लिए घटना और स्थानीय $ गुंजाइश यह फेंकना करने के लिए सूचीबद्ध करने के लिए है। मैं इसे http://plnkr.co/edit/LJECQZ?p=info

var app = angular.module('plunker', []); 
 

 
app.controller('Ctl1', function($scope, $rootScope) { 
 
    $scope.name = 'World'; 
 
    $rootScope.$on('changeValueInCtl1', function(event, value) { 
 
    $scope.name = 'New Value from Ctl2 is: ' + value; 
 
    }); 
 
}); 
 

 
app.controller('Ctl2', function($scope) { 
 
    $scope.changeValue = function() { 
 
    $scope.$emit('changeValueInCtl1', 'Control 2 value'); 
 
    } 
 
});
<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-controller="Ctl1"> 
 
    <p>Hello {{name}}!</p> 
 
    </div> 
 

 

 
    <div ng-controller="Ctl2"> 
 
    <button ng-click="changeValue()">Change Value</button> 
 
    </div> 
 

 
</body> 
 

 
</html>

केवल नकारात्मक पक्ष यह है $ rootScope सुनेंगे और एक स्पष्ट रूप से $ फोन इसे करने के लिए नष्ट करने के लिए है परीक्षण करने के लिए इस plnkr बनाया है।

संबंधित मुद्दे