AngularJS => 이벤트

매개 변수

매개 변수	값 유형
행사	Object {name : "eventName", targetScope : Scope, defaultPrevented : false, currentScope : ChildScope}
args	이벤트 실행과 함께 전달 된 데이터

각도 이벤트 시스템 사용

$ scope. $ emit

$scope.$emit 을 사용하면 범위 계층을 통해 위쪽으로 이벤트 이름이 시작되고 $scope 통지됩니다. 이벤트 수명주기는 $emit 이 호출 된 범위에서 시작됩니다.

작업 와이어 프레임 :

$ scope. $ broadcast

사용 $scope.$broadcast 아래 이벤트 발생합니다 $scope . $scope.$on 사용하여 이러한 이벤트를들을 수 있습니다 $scope.$on

작업 와이어 프레임 :

구문 :

// firing an event upwards
$scope.$emit('myCustomEvent', 'Data to send');

// firing an event downwards
$scope.$broadcast('myCustomEvent', {
  someProp: 'some value'
});

// listen for the event in the relevant $scope
$scope.$on('myCustomEvent', function (event, data) {
  console.log(data); // 'Data from the event'
});

$scope 대신 $rootScope 사용할 수 있습니다.이 경우 컨트롤러 범위에 관계없이 모든 컨트롤러에서 이벤트를 사용할 수 있습니다

AngularJS에 등록 된 이벤트 정리

컨트롤러가 등록 된 이벤트 처리를 파괴했기 때문에 등록 된 이벤트를 정리하는 이유는 여전히 살아 있습니다. 따라서 코드는 예기치 않게 실행됩니다.

// firing an event upwards
$rootScope.$emit('myEvent', 'Data to send');

// listening an event
var listenerEventHandler = $rootScope.$on('myEvent', function(){
    //handle code
});

$scope.$on('$destroy', function() {
    listenerEventHandler();
});

용도와 의의

이 이벤트는 둘 이상의 컨트롤러간에 통신하는 데 사용할 수 있습니다.

$emit 은 범위 계층 구조를 통해 위쪽으로 이벤트를 전달하지만 $broadcast 는 모든 하위 범위로 이벤트를 아래쪽으로 전달합니다. 여기서는 아름답게 설명 했습니다 .

컨트롤러간에 통신하는 동안 기본적으로 두 가지 유형의 시나리오가있을 수 있습니다.

컨트롤러가 Parent-Child 관계를 가질 때. (우리는 대부분 이러한 시나리오에서 $scope 를 사용할 수 있습니다)

컨트롤러가 서로 독립적이지 않고 서로의 활동에 대한 정보가 필요할 때. (이러한 시나리오에서는 $rootScope 를 사용할 수 있습니다)

예 : 전자 상거래 웹 사이트의 경우 제품 브랜드가 클릭되면 제품 목록 페이지를 제어하는 ProductListController 와 장바구니 항목을 관리하기위한 CartController 가 있다고 가정합니다. 이제 장바구니 에 추가 단추 를 클릭하면 CartController 알려야하므로 웹 사이트의 탐색 모음에 새 장바구니 항목 수 / 세부 정보를 반영 할 수 있습니다. 이것은 $rootScope 사용하여 얻을 수 있습니다.

$scope.$emit 사용하여 $scope.$emit

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script>
        var app = angular.module('app', []);

        app.controller("FirstController", function ($scope) {
            $scope.$on('eventName', function (event, args) {
                $scope.message = args.message;
            });
        });

        app.controller("SecondController", function ($scope) {
            $scope.handleClick = function (msg) {
                $scope.$emit('eventName', {message: msg});
            };
        });

    </script>
  </head>
  <body ng-app="app">
    <div ng-controller="FirstController" style="border:2px ;padding:5px;">
        <h1>Parent Controller</h1>
        <p>Emit Message : {{message}}</p>
        <br />
        <div ng-controller="SecondController" style="border:2px;padding:5px;">
            <h1>Child Controller</h1>
            <input ng-model="msg">
            <button ng-click="handleClick(msg);">Emit</button>
        </div>
    </div>
  </body>
</html>

$scope.$broadcast :

<html>
  <head>
    <title>Broadcasting</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script>
        var app = angular.module('app', []);

        app.controller("FirstController", function ($scope) {
            $scope.handleClick = function (msg) {
                $scope.$broadcast('eventName', {message: msg});
            };

        });

        app.controller("SecondController", function ($scope) {
            $scope.$on('eventName', function (event, args) {
                $scope.message = args.message;
            });
        });

    </script>
  </head>
  <body ng-app="app">
    <div ng-controller="FirstController" style="border:2px solid ; padding:5px;">
        <h1>Parent Controller</h1>
        <input ng-model="msg">
        <button ng-click="handleClick(msg);">Broadcast</button>
        <br /><br />
        <div ng-controller="SecondController" style="border:2px solid ;padding:5px;">
            <h1>Child Controller</h1>
            <p>Broadcast Message : {{message}}</p>
        </div>
    </div>
  </body>
</html>

$ destory 이벤트의 범위에있는 리스너의 $ rootScope. $ 등록을 항상 취소하십시오.

다른 컨트롤러로 이동하면 리스너의 $ rootScope. $이 메모리에 남아 있습니다. 컨트롤러가 범위를 벗어나면 메모리 누수가 발생합니다.

하지마.

angular.module('app').controller('badExampleController', badExample);

badExample.$inject = ['$scope', '$rootScope'];
function badExample($scope, $rootScope) {

    $rootScope.$on('post:created', function postCreated(event, data) {});

}

해야 할 것

angular.module('app').controller('goodExampleController', goodExample);

goodExample.$inject = ['$scope', '$rootScope'];
function goodExample($scope, $rootScope) {

    var deregister = $rootScope.$on('post:created', function postCreated(event, data) {});

    $scope.$on('$destroy', function destroyScope() {
        deregister();
    });

}

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

AngularJS
이벤트

수색…