AngularJs学习笔记(2)--控制器和ng-bind

来源：互联网发布：芒果tv会员账号淘宝编辑：程序博客网时间：2024/05/22 14:40

http://xlows.blog.51cto.com/5380484/1425255

(1)控制器

在angular中控制器随处可见，控制器在MVC里面主要是做控制业务逻辑，控制model的数据。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div ng-app="">
 
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name"/>
            <input type="text" value="" ng-model="age"/>
            {{name}}
            {{age}}
        </div>
    </div>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>

可以看到div下，有一个ng-controller的指令，里面的firstController可以暂时理解为angular的表达式，它会去找firstController的变量。我们可以在index.js的文件里声明这个变量。

1
2
3
4
5
6
7
8
9
var firstController = function($scope){
 
    // $scope 我们叫做作用域
    // 申明一个Model
    $scope.name = '张三';
 
    $scope.age = 20;
 
}

在function中必须写成$scope，这是angular的依赖注入，他是angular的一个作用域，是管理控制器的，它也可以向外找，最上层有一个rootscope。

运行后可以看到此时name为张三，age为20，如果修改了任意一个，label也会改变，这就是上节所说的双向绑定。

(2)ng-bind

继续看下上面的代码，如果angular没加载完而页面已经渲染了，那会是什么样呢？

可以看到{{name}}和{{age}}会直接在页面上显示出来，当angular加载完后，数据马上会渲染上去。

模拟一下从服务器下载angular的过程，我们在页面中加一行alert代码。

1
2
3
    <script>
        alert(3);
    </script>

可以看到在alert的时候页面上会显示用户不需要的东西，此时就可以用到ng-bind。

ng-bind是angular的一个指令。我们可以把html页面修改成如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div ng-app="">
 
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name"/>
            <input type="text" value="" ng-model="age"/>
            <div ng-bind="name"></div>
            <div ng-bind="age"></div>
        </div>
    </div>
    <script>
        alert(3);
    </script>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
 
 
</body>
</html>

这样才运行的时候就不会渲染用户不需要的东西

点击确定后，会加载model中的数据：

通过审查页面元素，可以看到，ng-bind还为model自动添加了一个class

因此两个label会在下一行显示。

0 0