AngularJs events

There are three ways to pass controller information:

Exploiting $rootScope

Scopes in Angular JS have a very hierarchical and nested structure. They all have a main $rootScope and then all other scope parts inherit from this $rootScope, or are nested in below the main scope.

2. Use the service service

One option is to create a singleton service in the application scope, and then handle all child scope communication through this service.

3. Use time to spread

Basic object for event propagation

<div ng-controller="parentController">
            parentController
            <ul>
                <li ng-repeat="i in [1]" ng-controller="currentController">
                    <button ng-click="emitEvent()">
                        Event propagates up $emit('parentEvent')
                    </button>
                    <button ng-click="broadcastEvent()">
                        Events propagate down $broadcast('sonEvent')
                    </button>
                    <br>
                    currentController
                    <ul>
                        <li ng-repeat="item in [1, 2]" ng-controller="sonController">
                            sonController
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

 

*/
function parentController($scope) {
    // The first parameter of the registered event is the event object, and the second is the parameter passed by the event
    $scope.$on('parentEvent', function(event,paramObj) {
        console.log("parentEvent");
        console.dir(paramObj);
    });
}

function currentController($scope) {
    // The first parameter of the registered event is the event object, and the second is the parameter passed by the event
    $scope.$on('currentEvent', function(event,paramObj) {
        console.log("currentEvent");
        console.dir(paramObj);
    });

    // Trigger on the parent $scope object of the current $scope
    $scope.emitEvent = function(){
        var paramObj = {
            name : "wangyuyong",
            age : 22
        };
        $scope.$emit("parentEvent", paramObj);
    };

    // Trigger the child $scope object on the current $scope
    $scope.broadcastEvent = function(){
        var paramObj = {
            name : "liumei",
            age : 23
        };
        $scope.$broadcast("sonEvent", paramObj);
    };

}

function sonController($scope) {
    // The first parameter of the registered event is the event object, and the second is the parameter passed by the event
    $scope.$on('sonEvent', function(event,paramObj) {
        console.log("sonEvent");
        console.dir(paramObj);
    });
}

 

 

1. $emit is broadcast to the parent controller 

2. $broadcast is to broadcast an event from the sender to his child scope.

3. $emit is broadcast to the parent controller, and the parent controller can receive the message

4. $on has two parameters function(event, msg) The first parameter is the event object, and the second parameter is the received message information.