生活大爆炸神奇的angularJS--controller控制器的作用
Posted 计科e点通
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了生活大爆炸神奇的angularJS--controller控制器的作用相关的知识，希望对你有一定的参考价值。
神奇的angularJS--controller
控制器的作用
一、什么是controller
在angularJS中，controlle是一个javascript函数/类，用于操作作用域中，各个对象的初始状态以及相应的行为
二、controller的作用域
我上一篇博客中，我写了个控制器，并将name赋值为“菲尔”
[javascript] view plain copy print?
app.controller('hellot function ($scope) {
$scope.name = "菲尔";});
如何将helloCtr|控制器绑定到相应的页面中.
我们在body使用了ng-controller指令, 因此整个body都成为了helloCtrI的作用范围，因此我们可以将{{name}}写于body的任何地方，假如我们将helloCtr|放置于div中，如:
头脑风暴ing...
[htmI] view plain copy print?
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8"><title></title></head>
<body ng-app="Hello">
<p> {{name}}</p>
<div ng-controller="helloCtr">
{{name}}</div>
</body>
<script src="bower_components/angular/angular.min.js " </script>
<script src="src/app.js"></script>
<script src="src/controller.js"></scrip >
</html>
我们再来看看结果，发现只出现了一个菲尔
localhost:633 42/T1/ in dex .htm I
菲尔
http://blog.csdn.net/ft6302244
还有一个{{name}}去哪里了呢，为了更清晰的表示，我们给第一个{{name}加入style如:[htmI] view plain copy print?
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8"><title></title></head>
<body ng-app="Hello">
<p style="background: yellow;height: 20px"></p>
<div ng-controller="helloCtr
{{name}}</div>
</body>
<script src="bower_components/angular/an
</script>
<script src="src/app.js"></script>
<script src="src/controller.js"></scrip
</html>
看看结果，明白了第一个{{name}}的值为空，
也就是说，helloCtrl并没有给第一个{{name赋
值
222222
C 介localhost:633 42/T 1/ir
菲尔
三、多controller的实现
根据上面我们知道，angularJS中view层解析是通过controller的作用域来将$scope对象解析成相应的内容，因此我们可以在同一个界面上划分不同的模块，通过不同的控制器控制不同的模块来进行开发，这样通过划分模块的开发方式，对今后维护代码带来了便利。
还是以前的例子，我们在controller.js中再写一个控制器: 如
[javascript] view plain copy print?
app.controller('hellotr function ($scope) {
$scope.name = "菲尔";});
app.controller('worldtr function ($scope) {
$scope.name="hello world" ;
})；
并且在html中绑定worldCtrl
[htmI] view plain copy print?
<!DOCTYPE html><html>
<head lanq="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app ="H ello">
<p style="background: yellow;height: 20px" I
controller="worldCtr {{name}}</p>
<div ng-controller="helloCtrl">
{{name}}
</div>
</body>
<script src="bower_components/angular/an
</script>
<script src="src/app.js"></script>
<script src="src/controller.js"></scri
</html>
收藏到代码笔记
这个时候第一个{{name}也就解析成功了
hello world
菲尔
我们会发现，不同的controller他们scope对象是不一样的，即使都是用了name这个变量，可以看出controller之间是封闭的，可是有时候我们面对两个模块之间进行数据交互，必然在两个controller之间进行通信，这就涉及到angular中的service操作，我会在下一篇文章进行记录。
转自:
http://blog.csdn.net/ft6302244/article/details/42
图片来源|网络
文字来源|网络
编辑排版|白杨
[微焦传媒 出品]
投稿邮箱：1058343106@qq.com
以上是关于生活大爆炸神奇的angularJS--controller控制器的作用的主要内容，如果未能解决你的问题，请参考以下文章