Question

我创建了这个包含两个控制器的示例页面，我正在尝试如何使用双向绑定，以便在用户输入其年龄时更新anotherController中的h3标题。一旦年龄更新，我不确定如何连接控制器。我期待事件流程更新ageHolder.age - ＆gt;更新AgeData - ＆gt;更新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";                  
    }
  });

Answer 1

      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>

我想有几个人认为你错过了你的代码：

你在'ageUpdate'事件上听，但没有任何函数触发该事件
您将模型分配到输入文本中，但如果输入值更新/更改，则忘记添加观察者。
你错过了工厂的'sendMessage'功能。

请看一下上面的代码并告诉我这是预期的结果吗？

干杯，

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

1 个答案: