首页 » 记事本 » AngularJS controller通信

AngularJS controller通信

父控制器向子控制器通信

<!DOCTYPE html>
<html>

<head>
    <title>Broadcasting</title>
    <script src="angular.js"></script>
</head>

<body ng-app="app">
    <div ng-controller="parentCtrl" style="border:2px solid #E75D5C; padding:5px;">
        <h1>Parent Controller</h1>
        <input ng-model="msg">
        <button ng-click="handleClick(msg);">Broadcast</button>
        <br />
        <br />
        <div ng-controller="childCtrl" style="border:2px solid #428bca;padding:5px;">
            <h1>Child Controller</h1>
            <p>Broadcast Message : {{message}}</p>
        </div>
    </div>
    <script>
    var app = angular.module('app', []);

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

    });

    app.controller("childCtrl", function($scope) {
        $scope.$on('eventName', function(event, args) {
            $scope.message = args.message;
            console.log($scope.message);
        });
    });
    </script>
</body>

</html>

子控制器向父控制器通信

<!DOCTYPE html>
<html>

<head>
    <title>Emit</title>
    <script src="angular.js"></script>
</head>

<body ng-app="app">
    <div ng-controller="parentCtrl" style="border:2px solid #E75D5C; padding:5px;">
        <h1>Parent Controller</h1>
        <p>Emit Message : {{message}}</p>
        <br />
        <div ng-controller="childCtrl" style="border:2px solid #428bca;padding:5px;">
            <h1>Child Controller</h1>
            <input ng-model="msg">
            <button ng-click="handleClick(msg);">Emit</button>
        </div>
    </div>
    <script>
    var app = angular.module('app', []);

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

    app.controller("childCtrl", function($scope) {
        $scope.handleClick = function(msg) {
            $scope.$emit('eventName', {
                message: msg
            });
        };
    });
    </script>
</body>

</html>

兄弟控制器通信

<!DOCTYPE html>
<html>

<head>
    <title>Emit and Broadcasting</title>
    <script src="angular.js"></script>
</head>

<body ng-app="app">
    <div ng-controller="parentCtrl" style="border:2px solid #E75D5C; padding:5px;">
        <h1>Parent Controller</h1>
        <p>Message : {{message}}</p>
        <div ng-controller="firstCtrl" style="border:2px solid #428bca;padding:5px;">
            <h1>first Controller</h1>
            <input ng-model="msg">
            <button ng-click="handleClick(msg);">Broadcast</button>
        </div>
        <br />
        <div ng-controller="secondCtrl" style="border:2px solid #428bca;padding:5px;">
            <h1>second Controller</h1>
            <p>result : {{result}}</p>
        </div>
    </div>
    <script>
    var app = angular.module('app', []);

    app.controller("parentCtrl", function($scope) {

        $scope.$on('eventName', function(event, args) {
            $scope.message = args.message;
            $scope.$broadcast('broadcastEvent', {
                message: args.message
            });
        });

    });

    app.controller("firstCtrl", function($scope) {
        $scope.handleClick = function(msg) {
            $scope.$emit('eventName', {
                message: msg
            });
        };
    });
    app.controller("secondCtrl", function($scope) {
        $scope.$on("broadcastEvent", function(event, args) {
            $scope.result = args.message;
        })
    });
    </script>
</body>

</html>
此文章发表在 记事本 标签为 . 将固定链接加入收藏.