Linking one controller to another to call service on ng-click

This simple example show to you how to share data between 2 controllers "in one app" using common service.

angular.module("app", []);

        ///controller1
        angular.module("app").controller("controller1", function ($scope, service) {
            $scope.lists = [
                { name: "maher" },
                { name: "Gaurav Ram" },
                { name: "Shaun Scovil" }
            ];

            $scope.send = function () {
                service.set("lists", $scope.lists); //set(key, value)
                $scope.lists = []; //optional
            }

        });

        ///controller2
        angular.module("app").controller("controller2", function ($scope, service) {
            $scope.lists = [];

            //get data from broadcast on the root
            service.get("lists"); // get(key)

            //set data
            $scope.resive = function () {
                if (angular.isUndefined($scope.broadcast)) {
                    $scope.alert = "No data to resive!";
                } else {
                    $scope.alert = null;
                    $scope.lists = $scope.broadcast;
                }
            }
        });

        ///service
        angular.module("app").service("service", function ($rootScope) {
            this.set = function (key, value) {
                $rootScope.$broadcast(key, value);
            }

            this.get = function (key) {
                $rootScope.$on(key, function (event, data) {
                    $rootScope.broadcast = data;
                });
            }
        });

<!doctype html>
<html ng-app="app">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

    <div ng-controller="controller1" class="col-md-6 col-sm-6 col-xs-6">
        <div class="page-header">
            <h1>controller 1</h1>
        </div>

        <button ng-click="send()" class="btn btn-primary">Send</button>
        <div class="clearfix"></div>
        <br/>
        <div class="alert alert-info" ng-if="lists.length == 0">Data <b>sent</b> to controller 2, click Resive button to get data</div>
        <ul class="list-group">
            <li ng-repeat="list in lists" class="list-group-item" ng-bind="list.name"></li>
        </ul>
    </div>

    <div ng-controller="controller2" class="col-md-6 col-sm-6 col-xs-6">
        <div class="page-header">
            <h1>controller 2</h1>
        </div>

        <button ng-click="resive()" class="btn btn-success">Resive</button>
        <div class="clearfix"></div>
        <br />
        <div class="alert alert-info" ng-bind="alert" ng-if="alert"></div>
        <ul class="list-group">
            <li ng-repeat="list in lists" class="list-group-item" ng-bind="list.name"></li>
        </ul>

    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</body>
</html>

Linking one controller to another to call service on ng-click

Related

Recent Posts