CODEWITHSUNDEEP
angularjsrootscope
kumara
kumara

Reputation: 937

pass date between two controllers using rootscope angular js

i am using $rootScope to share my values. please check my code

user controller (user.js)

var app = angular.module('myApp', []);
app.controller('user', function($scope,$rootScope) {
 $rootScope.test = "TEST";
});

customer controller (customer.js)

app.controller('customer', function($scope,$rootScope) {
   $scope.value = $rootScope.test;
            alert($scope.value);
});

this code seems to be ok. but result is undefined. i need to keep all data inside the controller also.

my result enter image description here

how i pass this value correctly

Upvotes: 0

Views: 68

Answers (1)

Stephane Janicaud
Stephane Janicaud

Reputation: 3627

Instead of user $rootScope to share some data between those controllers, you could also use a service. Here is an example :

(function () {
    'use strict';

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

    angular.
        module('app')
        .service('contextService', [function () {
            var context = {
                "foo": "bar",
                "hello": "boys"
            };
            var service = {
                getContext: function () {
                    return context;
                },
                getContextValue: function (key) {
                    return context[key];
                },
                setContextValue: function (key, value) {
                    context[key] = value;
                }
            }
            return service;
        }])
        .controller('userController', ['$scope', 'contextService', function ($scope, contextService) {
            var vm = this;
            vm.context = contextService.getContext();

            contextService.setContextValue("foo", "baz");
        }])
        .controller('customerController', ['$scope', 'contextService', function ($scope, contextService) {
            var vm = this;
            vm.context = contextService.getContext();

            vm.updateContext = function (key, value) {
                contextService.setContextValue(key, value);
            }
        }])

})();
<!DOCTYPE html>

<html lang="en" ng-app="app">
  <head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script src="module.js"></script>
  </head>
  <body>
    <div ng-controller="userController as vm">
      <strong>userController</strong>
      <pre>
        foo = {{ vm.context.foo }}
        hello = {{ vm.context.hello }}
      </pre>
    </div>
    <hr />
    <div ng-controller="customerController as vm">
      <strong>customerController</strong>
      <pre>
        foo = {{ vm.context.foo }}
      </pre>
      <button ng-click="vm.updateContext('hello', 'guys')">
        Update context <strong>hello</strong> value
      </button>
    </div>
  </body>
</html>

Upvotes: 1

Related Questions