2013-08-15 30 views
10

Mục tiêu của tôi là gửi một số dữ liệu từ bộ điều khiển góc tới bộ điều khiển góc khác.Góc, phát sóng không hoạt động

Dưới đây là bộ điều khiển ai phải gửi các datas:

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

}]); 

Dưới đây là bộ điều khiển thứ hai

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

     //this event is never fired 

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

Quan điểm của tôi được thiết kế theo cách đó:

<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

Trình điều khiển được khởi tạo như thế nào? Có phải 'ExcelViewCtrl' và phạm vi con của nó là' MapCtrl'? Xem sự khác biệt giữa '$ broadcast' và' $ emit'. –

+0

Có lẽ tôi đã hiểu lầm điểm đó. Tôi nghĩ rằng $ emit được sử dụng để gửi một tin nhắn cho phụ huynh, và phát sóng được sử dụng để gửi một cái gì đó cho mọi bộ điều khiển –

Trả lời

15

Tùy theo cách các bộ điều khiển được cấu trúc wrt đến $broadcast tin nhắn sẽ được định tuyến.

Theo documentation

công văn một tên sự kiện xuống cho tất cả các phạm vi trẻ em (và con cái của họ) thông báo cho ng đăng ký. $ RootScope.Scope # $ trên người nghe.

Điều này có nghĩa là trình điều khiển gửi phát sóng phải được xác định trên html gốc của html điều khiển con.

Dựa trên cấu trúc html của bạn, hãy sử dụng $rootScope.$broadcast. Tiêm $rootScope vào số MapCtrl và gọi phương thức $broadcast trên đó.

6

Tôi nghĩ bạn cần sử dụng $rootScope thay vì cho $scope.$broadcast. Xem ví dụ điển hình trong JSFiddle

3

Dưới đây là những ví dụ cho AngularJS - Giao tiếp giữa bộ điều khiển:

Ví dụ với giao tiếp sử dụng dịch vụ chia sẻ.

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

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

và Video Hướng dẫn

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

+0

Cảm ơn cảm hứng. Tôi đã tạo một dịch vụ thông báo hiện đang xử lý tất cả thông báo trên ứng dụng. Giữ mã rất sạch sẽ ... Cảm ơn – rahul

0

Một lựa chọn khác là sử dụng $ rootScope vào danh sách sự kiện và phạm vi $ địa phương để phát ra nó. Tôi đã tạo ra plnkr này để kiểm tra nó 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>

Nhược điểm duy nhất là $ rootScope sẽ được lắng nghe và người ta phải gọi một cách rõ ràng $ phá hủy nó.

Các vấn đề liên quan