Angularjs two-way binding fields of two different controllers on same page

Question

I created this sample page which has two controllers and I am experimenting how I can use two-way binding so that when the h3 heading in anotherController is updated once a user enters their age. I am not sure how to wire the controllers once the age is updated. I am looking the event flow to be Update ageHolder.age -> Update AgeData -> Update anotherController getCategory expression.

With these two controllers, I was able to trigger ageUpdated event but I could not get how to update the text in h3.

<!DOCTYPE html>
<html ng-app="factoryApp">
<head>
 <meta charset="utf-8" />
 <script src="/scripts/angular.js"></script>
 <script src="/scripts/FactoryApp.js"></script>
</head>
<body>
  <div ng-controller="factoryController as gsc">
   <label>Age:<input type="text" ng-model="gsc.ageHolder.age" ng-model-options="{ getterSetter: true }"/></label>
  </div>
  <div ng-controller="anotherController as asc">
    <h3>You are {{ asc.getCategory() }}.</h3>
  </div>  
</body>
</html>

  var app = angular.module('factoryApp', []);
  app.factory('AgeData', function () {
    return {age: 0};
  });
  app.controller('factoryController', function(AgeData){
      var gsc = this, _age = 20;
      gsc.ageHolder = {};
      gsc.ageHolder.age = function (anAge) {
       if (arguments.length) { 
        AgeData.age = anAge; 
        AgeData.sendMessage(anAge); 
       }
      };
  });

  app.controller('anotherController', function(AgeData, $scope) {
    console.log('Age is ', AgeData);
    var asc = this;
    var age = AgeData.age;
    $scope.$on('ageUpdated', function() {
      console.log('Age is updated');
      age = AgeData.age;
    });
    asc.getCategory = function() {
      if (age < 5)
         return "Toddler";
      else if (age < 13)
         return "Child";
      else if (age < 20)
         return "Teen";
      else if (age < 30)
         return "Youngster";
      else if (age < 45)
         return "Middle age";
      else if (age < 60)
         return "Mature person"
      else
        return "Senior Person";                  
    }
  });

This is not the same question. I am not using $scope. I am using the controller as syntax and also using the function syntax to update using getCategory. — randominstanceOfLivingThing, May 12 '16 at 02:57

mtamma · Accepted Answer · 2016-05-13T05:23:01.743

      var app = angular.module('factoryApp', []);
      app.factory('AgeData', function ($rootScope) {
          return {
              age: 0,
              'sendMessage': function (msg) {
                  $rootScope.$broadcast('ageUpdated', msg);
             }
         };
      });

      app.controller('factoryController', function(AgeData){
          var gsc = this;
          gsc.ageHolder = {
              'age': AgeData.age
          };
          gsc.ageHolder.setAge = function (anAge) {
              if (arguments.length) { 
                  AgeData.age = anAge; 
                  AgeData.sendMessage(anAge); 
              }
          };
      });

      app.controller('anotherController', function(AgeData, $scope) {
          console.log('Age is ', AgeData);
          var asc = this;
          var age = AgeData.age;
          $scope.$on('ageUpdated', function() {
              console.log('Age is updated');
              age = AgeData.age;
          });

          asc.getCategory = function() {
              if (age < 5)
                  return "Toddler";
              else if (age < 13)
                  return "Child";
              else if (age < 20)
                  return "Teen";
              else if (age < 30)
                  return "Youngster";
              else if (age < 45)
                  return "Middle age";
              else if (age < 60)
                  return "Mature person"
              else
                  return "Senior Person";                  
              }
          });

    <!DOCTYPE html>
    <html ng-app="factoryApp">
    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
    <body>
        <div ng-controller="factoryController as gsc">
            <label>Age:</label>
            <input type="text" ng-model="gsc.ageHolder.age" ng-model-options="{getterSetter: true }" ng-change="gsc.ageHolder.setAge(gsc.ageHolder.age)"/>
        </div>
        <div ng-controller="anotherController as asc">
            <h3>You are {{ asc.getCategory() }}.</h3>
        </div>  
    </body>
    </html>

I think there are couple thinks that you miss in your code:

you listen on 'ageUpdate' event but none function fireing that event
you assign model into input text but you forget to add a watcher if the input value update/change.
you miss 'sendMessage' function on your factory.

please take a look the code above and tell me is that the expected result?

Cheers,

if you read the code carefully you'll find that i add something in there. please do check in this plunkr --> https://plnkr.co/edit/IDT2zA8eiBYUIvvWDBJl?p=preview — mtamma, May 12 '16 at 08:34
I still dont get why you want me to edit this answer. did you check the plunkr. does it work? In which part that you think my answer is incorrect? — mtamma, May 16 '16 at 01:49
and also the problem with your code is you never define method sendMessage on AgeData Factory, but you try to execute it from factoryController. — mtamma, May 16 '16 at 01:52

Angularjs two-way binding fields of two different controllers on same page

1 Answers1