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

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

javascript angularjs

Javascript 同一页面上两个不同控制器的Angularjs双向绑定字段,javascript,angularjs,Javascript,Angularjs,我创建了这个示例页面，它有两个控制器，我正在试验如何使用双向绑定，以便在用户进入年龄后，当另一个控制器中的h3标题更新时。我不知道如何接线控制器一旦年龄更新。我希望事件流是Update ageHolder.age->Update AgeData->Update anotherController getCategory表达式使用这两个控制器，我能够触发ageUpdated事件，但我无法了解如何更新h3中的文本 <!DOCTYPE html> <html ng-app="fac

我创建了这个示例页面，它有两个控制器，我正在试验如何使用双向绑定，以便在用户进入年龄后，当另一个控制器中的

h3

标题更新时。我不知道如何接线控制器一旦年龄更新。我希望事件流是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";                  
    }
  });


年龄：
您是{{asc.getCategory（）}}。
var-app=angular.module（'factoryApp'，[]）；
应用程序工厂（'AgeData'，函数（）{
返回{age:0}；
});
应用程序控制器（'factoryController'，函数（AgeData）{
var gsc=这个，年龄=20岁；
gsc.ageHolder={}；
gsc.ageHolder.age=功能（管理）{
if（arguments.length）{
AgeData.age=age；
AgeData.sendMessage（管理）；
}
};
});
应用控制器（'anotherController'，函数（AgeData，$scope）{
console.log（'Age is'，AgeData）；
var asc=此；
var age=AgeData.age；
$scope.$on（'ageUpdated'，function（）{
console.log（'Age is updated'）；
年龄=年龄数据。年龄；
});
asc.getCategory=函数（）{
if（年龄<5岁）
返回“幼儿”；
否则，如果（年龄<13岁）
返回“孩子”；
否则，如果（年龄<20岁）
返回“青少年”；
否则，如果（年龄<30岁）
返回“年轻人”；
否则，如果（年龄<45岁）
回归“中年”；
否则，如果（年龄<60岁）
回归“成熟人”
其他的
返回“高级人员”；
}
});

var-app=angular.module（'factoryApp'，[]）；
应用程序工厂（'AgeData'，函数（$rootScope）{
返回{
年龄:0,，
“sendMessage”：函数（消息）{
$rootScope.$broadcast（'ageUpdated'，msg）；
}
};
});
应用程序控制器（'factoryController'，函数（AgeData）{
var gsc=此；
gsc.ageHolder={
“年龄”：AgeData.age
};
gsc.ageHolder.setAge=功能（管理）{
if（arguments.length）{
AgeData.age=age；
AgeData.sendMessage（管理）；
}
};
});
应用控制器（'anotherController'，函数（AgeData，$scope）{
console.log（'Age is'，AgeData）；
var asc=此；
var age=AgeData.age；
$scope.$on（'ageUpdated'，function（）{
console.log（'Age is updated'）；
年龄=年龄数据。年龄；
});
asc.getCategory=函数（）{
if（年龄<5岁）
返回“幼儿”；
否则，如果（年龄<13岁）
返回“孩子”；
否则，如果（年龄<20岁）
返回“青少年”；
否则，如果（年龄<30岁）
返回“年轻人”；
否则，如果（年龄<45岁）
回归“中年”；
否则，如果（年龄<60岁）
回归“成熟人”
其他的
返回“高级人员”；
}
});

年龄：
您是{{asc.getCategory（）}}。
这不是同一个问题。我没有使用$scope。我使用控制器作为语法，也使用函数语法使用getCategory进行更新。请重新阅读问题。这也不是答案。您没有添加任何内容。如果仔细阅读代码，您会发现我在其中添加了一些内容。请务必签入此plunkr-->我仍然不明白您为什么要我编辑此答案。你有没有检查弹片。它有用吗？在哪一部分您认为我的答案不正确？代码的问题是您从未在AgeData Factory上定义方法sendMessage，但您尝试从factoryController执行它。