神奇的angularJS——controller控制器的作用

最新推荐文章于 2024-03-06 21:10:53 发布

快乐的程序媛

最新推荐文章于 2024-03-06 21:10:53 发布

阅读量1.1k

点赞数

分类专栏： Angularjs

Angularjs 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、什么是controller

在angularJS中，controlle是一个javascript函数/类，用于操作作用域中，各个对象的初始状态以及相应的行为

二、controller的作用域

我上一篇博客中，我写了个控制器，并将name赋值为“菲尔”

[javascript] view plain copy

print ?

app.controller('helloCtrl', function ($scope) {
$scope.name = "菲尔";
});

app.controller('helloCtrl', function ($scope) {
    $scope.name = "菲尔";
});

如何将helloCtrl控制器绑定到相应的页面中了，我们在body使用了 ng-controller指令，因此整个body都成为了helloCtrl的作用范围，因此我们可以将 {{name}}写于body的任何地方，假如我们将helloCtrl放置于div中，如：

[html] 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="helloCtrl">
{{name}}
</div>
</body>
<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="Hello">


<p> {{name}}</p>


<div ng-controller="helloCtrl">
    {{name}}
</div>


</body>


<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>

我们在来看看结果，发现只出现了一个菲尔

还有一个{{name}}去哪里了呢，为了更清晰的表示，我们给第一个{{name}}加入style如：

[html] 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"> {{name}}</p>
<div ng-controller="helloCtrl">
{{name}}
</div>
</body>
<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="Hello">

<p style="background: yellow;height: 20px"> {{name}}</p>

<div ng-controller="helloCtrl">
    {{name}}
</div>

</body>

<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>

看看结果，明白了第一个{{name}}的值为空，也就是说，helloCtrl并没有给第一个{{name}}赋值

三、多controller的实现

根据上面我们知道，angularJS中view层解析是通过controller的作用域来将$scope对象解析成相应的内容，因此我们可以在同一个界面上划分不同的模块，通过不同的控制器控制不同的模块来进行开发，这样通过划分模块的开发方式，对今后维护代码带来了便利。

还是以前的例子，我们在controller.js中再写一个控制器：如

[javascript] view plain copy

print ?

app.controller('helloCtrl', function ($scope) {
$scope.name = "菲尔";
});
app.controller('worldCtrl', function ($scope) {
$scope.name="hello world";
});

app.controller('helloCtrl', function ($scope) {
    $scope.name = "菲尔";
});

app.controller('worldCtrl', function ($scope) {
    $scope.name="hello world";
});

并且在html中绑定 worldCtrl

[html] 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" ng-controller="worldCtrl"> {{name}}</p>
<div ng-controller="helloCtrl">
{{name}}
</div>
</body>
<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="Hello">

<p style="background: yellow;height: 20px" ng-controller="worldCtrl"> {{name}}</p>

<div ng-controller="helloCtrl">
    {{name}}
</div>

</body>

<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>

这个时候第一个{{name}}也就解析成功了

我们会发现，不同的controller他们scope对象是不一样的,即使都是用了name这个变量，可以看出controller之间是封闭的，可是有时候我们面对两个模块之间进行数据交互，必然在两个controller之间进行通信，这就涉及到angular中的service操作，我会在下一篇文章进行记录。

转自：http://blog.csdn.net/ft6302244/article/details/42387839