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
'IT이야기' 카테고리의 다른 글
| 상속보다 구성을 선호 (0) | 2021.04.25 |
|---|---|
| TypeScript 인터페이스에서 getter, setter 사용 (0) | 2021.04.25 |
| NSURLSession과 함께 NSOperationQueue 사용 (0) | 2021.04.24 |
| Array.isArray와 instanceof Array 사용의 차이점 (0) | 2021.04.24 |
| AngularJS 오류 : $ injector : unpr 알 수없는 공급자 (0) | 2021.04.24 |