Angular, Sendung nicht funktioniert

mein Ziel ist es, einige Daten aus einem Winkel Controller zu einem anderen zu senden.Angular, Sendung nicht funktioniert

Hier ist der Controller, der die Daten senden hat:

<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>

Quelle

2013-08-15 Deblaton Jean-Philippe

Wie werden die Controller instanziiert? Sind "ExcelViewCtrl" und sein Bereich untergeordnete Elemente von "MapCtrl"? Sehen Sie den Unterschied zwischen '$ broadcast' und' $ emit'. –

Vielleicht habe ich diesen Punkt missverstanden. Ich denke, dass $ emit wird verwendet, um eine Nachricht an die Eltern zu senden, und Broadcast verwendet, um etwas an jeden Controller senden –

Abhängig von:

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

}]);

Hier ist der zweite Controller

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

     //this event is never fired 

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

Meine Ansicht, dass die Art und Weise gestaltet ist Wie die Controller strukturiert sind zu $broadcast Nachricht würde geroutet werden.

Per documentation

Sendet ein Ereignis Namen nach unten auf alle untergeordneten Bereiche (und ihre Kinder ) Anmeldern der registrierten ng. $ RootScope.Scope # $ auf die Zuhörer.

Das bedeutet, dass der Controller, der die Übertragung sendet, auf dem übergeordneten HTML des untergeordneten Controllers HTML definiert sein sollte.

Basierend auf Ihre HTML-Struktur verwenden $rootScope.$broadcast. Injizieren Sie die $rootScope in die MapCtrl und rufen $broadcast Methode auf sie.

Quelle

2013-08-15 07:06:55 Chandermani

Ich denke, Sie müssen stattdessen $rootScope für $scope.$broadcast verwenden. Siehe gutes Beispiel in JSFiddle

Quelle

2013-08-15 07:18:03

Im Folgenden sind die Beispiele für AngularJS - Kommunikation zwischen Steuerungen:

Beispiel mit Kommunikation Shared-Service.

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

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

und Video Tutorial

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

Quelle

2013-08-15 07:21:20

Vielen Dank für die Inspiration. Ich habe einen Benachrichtigungsdienst erstellt, der jetzt alle Benachrichtigungen in der gesamten App verarbeitet. Hält den Code sehr sauber ... Danke – rahul

Eine weitere Option ist $ rootScope zu verwenden, um Ereignis und lokalen $ scope aufzulisten es zu emittieren. Ich habe diese plnkr erstellt es 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>

Der einzige Nachteil der $ rootScope hören testen wird und man muss explizit $, um es zu zerstören nennen.

Quelle

2017-03-30 01:18:24 Shridhar

Angular, Sendung nicht funktioniert

Antwort

Verwandte Themen