gpt4 book ai didi

javascript - 同一页面上两个不同 Controller 的Angularjs双向绑定(bind)字段

转载 作者:行者123 更新时间:2023-11-30 00:09:16 25 4
gpt4 key购买 nike

<分区>

我创建了这个包含两个 Controller 的示例页面,我正在试验如何使用双向绑定(bind),以便在用户进入他们的年龄后更新 anotherController 中的 h3 标题。我不确定年龄更新后如何连接 Controller 。我正在查看事件流是 Update ageHolder.age -> Update AgeData -> Update anotherController getCategory 表达式。

使用这两个 Controller ,我能够触发 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";
}
});

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com