$emit 또는 $는 컨트롤러에서 지시 AngularJS로 이벤트를 브로드캐스트합니다.

$emit 또는 $는 컨트롤러에서 지시 AngularJS로 이벤트를 브로드캐스트합니다.

지시가 표시되는 내용을 변경하는 이벤트가 발생했을 때 지시를 알릴 수 있기를 원합니다.디렉티브는 한 번만 실행하는 걸로 알고 있는데 어떻게 해야 할지 궁금합니다.$emit을 사용해야 하는지 $broadcast를 사용해야 하는지도 잘 모르겠습니다. 지시는 컨트롤러의 자식입니까?

예를 들어, 컨트롤러에는 다음과 같은 기능이 있습니다.

$rootScope.$emit('PHOTO_UPLOADED', photo);

그리고 내 지시대로라면

.directive('photo', [function () {
  return {
    restrict: 'EA',
    scope: {user: '='},
    replace: true,
    template: '<div id="{{user.id}}"></div>',
    link: function ($scope, element, attrs) {
      var thumbnail = ($scope.user && $scope.user.image) 
        ? $scope.user.image
        : '/default.png';

      element.css('background-image', 'url(' + thumbnail + ')');

      $rootScope.$on('PHOTO_UPLOADED', function(event, data) {
         thumbnail = data;
      });
    }
  };
}])

이 작업을 시도했지만 아무 일도 일어나지 않았습니다. 지침이 이미 실행되었기 때문에 썸네일이 업데이트되지 않았습니다.

사용하다$broadcast. 이벤트를 어린이 범위로 방송합니다.다음은 브로드캐스트를 사용하여 부모 컨트롤러의 지시에 데이터를 보내는 예입니다.

http://jsfiddle.net/smaye81/q2hbnL5b/6/

컨트롤러에서 다음 작업을 수행합니다.

$rootScope.$broadcast('PHOTO_UPLOADED', photo);

그리고 당신의 지시에 따라, 다음을 통해 방송 이벤트를 잡으세요.

  $rootScope.$on('PHOTO_UPLOADED', function(event, data) {
         thumbnail = data;
      });

당신은 반드시 통과해야 합니다.$rootScope사용자의 지시에 따라 주입할 수 있습니다.

.directive('photo', ['$rootScope', function($rootScope) {
// snip
}]);

당신 코드의 첫 번째 줄을 위로 수정하면 잘 될 것입니다.

언급URL : https://stackoverflow.com/questions/25878077/emit-or-broadcast-an-event-from-a-controller-to-a-directive-angularjs