梦见世界

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
angular.js 学习 ng-app ng-model

1.ng-app

使用ng-app声明Angular的边界

你可以用ng-app 指令告诉Angular 应该管理页面中的哪一块。如果你正在构建一款纯Angular 应用，那么你应该把ng-app 指令写在<html> 标签中，示例如下：
 

  1. <html ng-app> 
  2. …  
  3. </html> 

这样就会告诉Angular 去管理页面上的所有DOM 元素。

如果你有一款现存的应用，该应用正在用其他一些技术（如Java 或Rails）来管理DOM，那么你可以让Angular 只管理页面中的一部分，只要在页面中放入一些<div> 之类的元素即可。

  1. <html> 
  2. …  
  3. <div ng-app> 
  4. …  
  5. </div> 
  6. …  
  7. </html> 

 

2.ng-model 实现数据的双向绑定

上一章介绍了AngularJS框架的插值语法和ng-bind指令，本章介绍ng-model指令，本指令用于实现input和变量的双向绑定。

示例代码：

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>ng-model directive</title>
</head>
<body ng-controller="HelloController">
<div>
    <p>双向绑定</p>
    <input ng-model="greeting">
    <p>Hello {{greeting || "World"}}</p>
    <button ng-click="init()">重置</button>
    <hr>
</div>
 
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
    function HelloController($scope) {
        $scope.init = function() {
            $scope.greeting = "Hello";
        }
    }
</script>
</body>
</html>



input加上ng-model指令后，框架会负责input和greeting变量的自动同步。

插值中支持表达式语法，下面用了一个或表达式，因为greeting初始为空，所以页面加载后输出Hello World，改变input中的值，greeting变量也会被框架改变，从而使段落中文字自动跟随变化。

HelloController中定义了一个init()方法，button的ng-click指令会触发这个方法，类似的事件指令还有很多，用法基本一致，只是click换成dbclick这样不同事件名而已

 
posted on 2015-11-08 20:07  梦见世界  阅读(267)  评论(0)    收藏  举报