Angular, трансляция не работает

Моя цель - отправить некоторые данные из контроллера angular в другой.

Вот контроллер, который должен отправить данные:

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

Мой взгляд разработан таким образом:

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

Ответы

Ответ 1

В зависимости от того, как структурированы контроллеры, сообщение w.r.t в $broadcast будет маршрутизироваться.

По документация

Отправляет имя события вниз во все дочерние области (и их дети), уведомляющие зарегистрированных пользователей. $rootScope.Scope # $на слушателях.

Это означает, что контроллер, отправляющий широковещательную рассылку, должен быть определен в родительском html дочернего контроллера html.

На основе вашей структуры html используйте $rootScope.$broadcast. Внесите $rootScope в MapCtrl и вызовите метод $broadcast на нем.

Ответ 2

Я думаю, вам нужно использовать $rootScope вместо этого для $scope.$broadcast. См. Хороший пример в JSFiddle

Ответ 4

Другим вариантом является использование $rootScope для отображения события и локальной области $, чтобы испустить его. Я создал этот plnkr, чтобы проверить его 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>