IT이야기

AngularJS : 지시문의 브로드 캐스트 이벤트

cyworld 2021. 4. 24. 09:51
반응형

AngularJS : 지시문의 브로드 캐스트 이벤트


나는 사람들이 코드의 어디에서나 이것을하는 것을 보았습니다.

$rootScope.$broadcast('someEvent', someParameter); 

그런 다음 일부 컨트롤러에서 :

$rootScope.$on('someEvent', function(event, e){ /* implementation here */ });

이제 지시문에서 이벤트를 브로 캐스트하고 싶습니다. rootScope 수준에서 브로드 캐스트하는 것이 좋은 습관입니까? 컨트롤러에서이 이벤트를 처리하고 싶습니다. $ scope를 사용할 수 있습니까? 아니면 여전히 $ rootScope에서 들어야합니까?


제 경우에는 디렉티브에서 디렉티브를 사용하는 뷰의 컨트롤러로 이벤트를 브로드 캐스트하고 싶습니다. 그렇다면 브로드 캐스트를 사용하는 것이 여전히 타당합니까?

지시문이 사용되는 HTML에 지정된 컨트롤러의 메서드를 지시문이 호출하게합니다.

격리 범위를 사용하는 지시문의 경우 :

<div my-dir ctrl-fn="someCtrlFn(arg1)"></div>

app.directive('myDir', function() {
  return {
    scope: { ctrlFn: '&' },
    link: function(scope, element, attrs) {
       ...
       scope.ctrlFn({arg1: someValue});
    }

격리 범위를 사용하지 않는 지시문의 경우 :

<div my-dir ctrl-fn="someCtrlFn(arg1)"></div>

app.directive('myDir', function($parse) {
  return {
    scope: true,  // or no new scope -- i.e., remove this line
    link: function(scope, element, attrs) {
       var invoker = $parse(attrs.ctrlFn);
       ...
       invoker(scope, {arg1: someValue} );
    }

일반적으로 $ rootScope는 전역 적이므로 사용하지 않는 것이 좋으며 실제로 수행중인 작업을 알지 못하는 경우 오염시키지 않아야합니다. 서비스, ​​지시문 및 컨트롤러 간의 통신에 대한이 기사 를 읽는 것이 좋습니다 .


다음은 포함 된 지시문에서 컨트롤러의 메서드를 다시 호출하는 방법에 대한 TypeScript 예제입니다. 가장 중요한 점은 콜백에 대한 지시문의 매개 변수 이름이 정의 될 때 &를 사용한다는 것입니다. 해당 콜백을 호출 할 때 위치 매개 변수를 사용하지 말고 대신 대상에 매개 변수 이름이있는 속성이있는 객체를 사용해야합니다.

앱 모듈을 만들 때 지시문을 등록합니다.

module MyApp {
    var app: angular.IModule = angular.module("MyApp");
    MyApp.Directives.FileUploader.register(app);
}

등록 코드는 다음과 같습니다.

module MyApp.Directives.FileUploader {
  class FileUploaderDirective implements angular.IDirective {
      public restrict: string = "E";
      public templateUrl: string = "/app/Directives/FileUploader/FileUploaderDirective.html";

      //IMPORTANT - Use & to identify this as a method reference
      public scope: any = {
        onFileItemClicked: "&"
      };
      public controller: string = "MyApp.Directives.FileUploader.Controller";
      public controllerAs: string = "controller";
      public bindToController: boolean = true;
      public transclude: boolean = true;
      public replace: boolean = true;
  }

  export function register(app: angular.IModule) {
      app.controller("MyApp.Directives.FileUploader.Controller", Controller);
      app.directive("fileUploader", () => new FileUploaderDirective());
  }
}

지시어의 컨트롤러는 다음과 같습니다.

module MyApp.Directives.FileUploader {
    export class Controller {
        public files: string[] = ["One", "Two", "Three"];
        //The callback specified in the view that created this directive instance
        public onFileItemClicked: (fileItem) => void;

        // This is the controller method called from its HTML's ng-click
        public fileItemClicked(fileItem) {
            //IMPORTANT: Don't use comma separated parameters,
            //instead use an object with property names to act as named parameters
            this.onFileItemClicked({
                fileItem: fileItem
            });
        }
    }
}

The directive's HTML would look something like this

<ul>
  <li ng-repeat="item in controller.files" ng-click="controller.fileItemClicked (item)">
    {{ item }}
  </li>
</ul>

The main view will have an instance of your directive like so

<body ng-app="MyApp" ng-controller="MainController as controller">
  <file-uploader on-file-item-clicked="controller.fileItemClicked(fileItem)"/>
</body>

Now all you need on your MainController is a method

public fileItemClicked(fileItem) {
  alert("Clicked " + fileItem);
}

ReferenceURL : https://stackoverflow.com/questions/16199212/angularjs-broadcast-event-from-directive

반응형