Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Sharing Data Between Controllers in AngularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 258
    Comment on it

    Hi All,

    To share data between two controller you should have your factory return an object and let your controllers work with a reference to the same object:

    A simple example in which two controllers are sharing name of a user.

    TEST.html

     <!DOCTYPE html>
    <html>
      <head>
        <title>Page Title</title>
      </head>
      <body ng-app="myApp" ng-init="value = 'App'">
      
        <div ng-controller="FrstCtrl">
          <input type="text" ng-model="Data.FirstName">
          <br>Input is : <strong>{{Data.FirstName}}</strong>
        </div>
    
        <hr>
    
        <div ng-controller="ScndCtrl">
          Input should also be here: {{Data.FirstName}}
        </div>
    
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
        <script src="TEST.js"></script>
    
      </body>
    </html> 
    

    TEST.js

    var myApp = angular.module('myApp', []);
    
    myApp.factory('Data', function () {
        return { FirstName: '' };
    });
    
    myApp.controller('FrstCtrl', function ($scope, Data) {
        $scope.Data = Data;
    });
    
    myApp.controller('ScndCtrl', function ($scope, Data) {
        $scope.Data = Data;
    });
    

    Now you can see that , whatever you write in first controller input you can see in both controller.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: