AngularJS의 범위는 매우 계층적이고 잘 알려진 구조를 가지고 있습니다. 그것들은 모두 메인 $ 루트 스코프 (즉, 해당 각도 응용 프로그램 또는 NG-APP)를 가지고 있으며, 다른 모든 스코프 부품은이 $ rootscope에서 상속되거나 기본 범위에 중첩됩니다. 여러 번, 이러한 스코프는 변수를 공유하지 않거나 다른 프로토 타입에서 어떤 것도 상속받지 못한다는 것을 알게 될 것입니다.
이 경우 스코프간에 어떻게 전달합니까? 한 가지 옵션은 응용 프로그램 범위에서 싱글 톤 서비스를 작성한 다음이 서비스를 통해 모든 서브 스코프에 대한 통신을 처리하는 것입니다.
AngularJS에는 또 다른 옵션이 있습니다 : 범위의 이벤트를 통한 통신 처리. 그러나이 접근법에는 몇 가지 한계가 있습니다. 예를 들어, 모든 모니터링의 범위에 이벤트를 널리 퍼뜨릴 수는 없습니다. 부모의 범위 또는 자식 범위와 의사 소통할지 여부를 선택해야합니다.
$ on, $ emit 및 $ broadcast는 컨트롤러 간의 이벤트와 데이터를 간단하게 만듭니다.
예는 다음과 같습니다
HTML 코드
<div ng-controller = "parentctrl"> <!-부모-> <div ng-controller = "selfctrl"> <!-self-> <a ng-click = "click ()"> click me </a> </a> <div ng-controller = "childctrl"> </div> <!-child-> </div> <broctrl "> broctrl. <!-부모-> </div>
JS 코드
app.controller ( 'selfctrl', function ($ scope) {$ scope.click = function () {$ scope. $ broadcast ( 'to-child', 'child'); $ scope. $ scope. $ scope ( 'to-parent', 'parent'); app.controller ( 'parentctrl', function ($ scope)) {$ scope. function (event, data) {console.log ( 'parentctrl', data); 값을 얻을 수 있습니다. $ scope. $ on ( 'to-Child', function (event, data) {console.log ( 'childctrl', data); // 값을 얻을 수 있습니다. $ scope. function ($ scope. $ on, function, data) {console.log ( 'broctrl', data); 값은 레벨에 의해 얻지 못한다.최종 결과
ParentCtrl 부모
Childctrl Child
$ emit 및 $ broadcast는 여러 매개 변수를 전달할 수 있으며 $ on은 여러 매개 변수를받을 수 있습니다.
$ on 메소드의 이벤트 이벤트 매개 변수, 객체 속성 및 메소드는 다음과 같습니다.
| 이벤트 속성 | 목적 |
|---|---|
| 이벤트 .TargetScope | 원래 이벤트를 방출하거나 전파하는 범위 |
| 이벤트 .currentscope | 현재 처리중인 이벤트의 범위 |
| 이벤트. 이름 | 이벤트 이름 |
| event.stopPropagation () | 이벤트가 추가 전파 (버블 링/캡처)를 방지하는 함수 (`$ emit`으로 방출되는 이벤트에만 적용됨) |
| event.preventDefault () | 이 메소드는 실제로 아무것도하지 않지만 'defaultPrevent'를 true로 설정합니다. 이벤트 리스너의 구현자가 조치를 취할 때까지`defaultprevent '의 값을 확인하지 않습니다. |
| event.defaultprevented | `extendefault`가 호출되면 true |
다른 컨트롤러의 서비스 통신보다 훨씬 더 편리하다고 느낍니다 ~~
위의 것은 Angularjs $ on, $ emit 및 $ broadcast에 대한 정보를 편집 한 것입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!