同一页面上两个不同控制器的Angularjs双向绑定字段[重复]
Posted
技术标签:
【中文标题】同一页面上两个不同控制器的Angularjs双向绑定字段[重复]【英文标题】：Angularjs two-way binding fields of two different controllers on same page [duplicate] 【发布时间】：2016-09-07 11:36:01 【问题描述】：我创建了这个包含两个控制器的示例页面，并且我正在尝试如何使用双向绑定，以便在用户输入年龄后更新另一个控制器中的 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";
);
【问题讨论】：
这不是同一个问题。我没有使用 $scope。我使用控制器作为语法，也使用函数语法使用 getCategory 进行更新。 【参考方案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>
请看一下上面的代码，告诉我这是预期的结果吗？
干杯，
【讨论】：
请重新阅读问题。 这也不是答案。您没有添加任何内容。 如果您仔细阅读代码，您会发现我在其中添加了一些内容。请检查这个 plunkr --> plnkr.co/edit/IDT2zA8eiBYUIvvWDBJl?p=preview 我还是不明白你为什么要我编辑这个答案。你检查过plunkr吗？它有效吗？您认为我的回答在哪一部分不正确？ 您的代码的问题是您从未在 AgeData Factory 上定义方法 sendMessage，但您尝试从 factoryController 执行它。以上是关于同一页面上两个不同控制器的Angularjs双向绑定字段[重复]的主要内容，如果未能解决你的问题，请参考以下文章