如何利用AngularJS绑定两个控制器并变量赋值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何利用AngularJS绑定两个控制器并变量赋值相关的知识，希望对你有一定的参考价值。
AngularJS是常见的一个基于MVC的javascript框架，MVC是模型视图控制器三者结合起来的。在AngularJS中，一个model可以对应一个或一个以上的控制器。下面利用一个实例说明AngularJS有一个model和两个控制器，操作如下：1、打开HBuilder开发工具，新建静态页面out.html，引入angularjs和相关的Bootstrap样式文件
2、在body元素内插入div和h2元素，并设置它们的样式
3、再次插入两个h3，绑定ng-controller和ng-app
4、在<script></script>编写AngularJS模型和控制器的关系，并给变量赋值
5、编写完毕后，在浏览器中预览该页面的效果
6、为了展示“||”的用法，不给变量赋值，再次预览页面效果 参考技术A AngularJS是常见的一个基于MVC的JavaScript框架，MVC是模型视图控制器三者结合起来的。在AngularJS中，一个model可以对应一个或一个以上的控制器。下面利用一个实例说明AngularJS有一个model和两个控制器，操作如下：
1、打开HBuilder开发工具，新建静态页面out.html，引入angularjs和相关的Bootstrap样式文件
2、在body元素内插入div和h2元素，并设置它们的样式
3、再次插入两个h3，绑定ng-controller和ng-app
4、在<script></script>编写AngularJS模型和控制器的关系，并给变量赋值
5、编写完毕后，在浏览器中预览该页面的效果
6、为了展示“||”的用法，不给变量赋值，再次预览页面效果本回答被提问者采纳
同一页面上两个不同控制器的Angularjs双向绑定字段[重复]
【中文标题】同一页面上两个不同控制器的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绑定两个控制器并变量赋值的主要内容，如果未能解决你的问题，请参考以下文章
同一页面上两个不同控制器的Angularjs双向绑定字段[重复]