각도, 방송이 작동하지 않습니다.

제 목표는 각도 컨트롤러에서 다른 각도로 데이터를 보내는 것입니다.각도, 방송이 작동하지 않습니다.

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

출처

2013-08-15 Deblaton Jean-Philippe

컨트롤러는 어떻게 인스턴스화됩니까? 'ExcelViewCtrl'과 그 범위가'MapCtrl'의 자식입니까? '$ broadcast'와'$ emit'의 차이점을보십시오. –

아마도 그 점을 오해했을 것입니다. 나는 $ emit이 부모에게 메시지를 보내는 데 사용되며, 모든 컨트롤러에 무언가를 보내는 데 사용되는 방송이라고 생각합니다. –

에 따라 : 다음은 내보기 그런 식으로 설계되어

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

     //this event is never fired 

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

두 번째 컨트롤러 인

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

}]);

: 여기

는 datas를 보낼 수있는 컨트롤러입니다 컨트롤러가 어떻게 구성되어 $broadcast 메시지가 라우팅 될지를 결정합니다. documentation

당으로

등록 된 NG 통지 모든 하위 범위 (및 자녀)에 아래 이벤트 이름을 전달합니다. $ rootScope.Scope # $ 청취자에.

이것은 브로드 캐스트를 보내는 컨트롤러가 하위 컨트롤러 html의 상위 html에 정의되어야 함을 의미합니다.

html 구조를 기반으로 $rootScope.$broadcast을 사용하십시오. $rootScope을 MapCtrl에 삽입하고 $broadcast 방법을 호출하십시오.

출처

2013-08-15 07:06:55 Chandermani

$scope.$broadcast 대신 $rootScope을 사용해야한다고 생각합니다. 공유 서비스를 사용하여 통신과

예 : 컨트롤러 사이의 통신 - JSFiddle

출처

2013-08-15 07:18:03

좋은 예를 참조하십시오 아래 AngularJS와에 대한 예입니다.

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

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

및 비디오 자습서

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

출처

2013-08-15 07:21:20

영감을 주셔서 감사합니다. 앱 전체의 모든 알림을 처리하는 알림 서비스를 만들었습니다. 코드를 매우 깨끗하게 유지합니다 ... 감사합니다. – rahul

또 다른 옵션은 행사하고 방출하는 지역 $의 범위를 나열하는 $ 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을 만들었습니다.

출처

2017-03-30 01:18:24 Shridhar

각도, 방송이 작동하지 않습니다.

답변

관련 문제