同一页面上两个不同控制器的Angularjs双向绑定字段

randominstanceOfLivingThing 发表于 Dev

randominstanceOfLivingThing

我创建了这个示例页面，其中包含两个控制器，并且我正在尝试如何使用双向绑定，以便h3一旦用户输入了年龄，就可以更新anotherController中的标题。更新年龄后，我不确定如何连接控制器。我正在寻找事件流为Update ageHolder.age-> Update AgeData-> Update anotherController getCategory表达式。

使用这两个控制器，我能够触发ageUpdated事件，但无法获取有关如何更新中的文本的信息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";                  
    }
  });

mtamma

      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>