控制器->模板->控制器->模板
数据到模板的绑定,主要是使用模板标记直接完成的。 模板到数据的绑定,主要是通过 ng-model 来完成的。
使用 {{ }}
这个标记,就可以直接引用,并绑定一个作用域内的变量。在实现上, ng 自动创建了一个 watcher 。效果就是,不管因为什么,如果作用域的变量发生了改变,我们随时可以让相应的页面表现也随之改变。我们可以看一个更纯粹的例子:
index.html
<head>
<script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
<input type="text" value="" ng-model="name"/>
<input type="text" value="" ng-model="age"/>
{{name}}
{{age}}
</div>
</div>
</body>
app/index.js
var app = angular.module('myApp', []);
app.controller('firstController', function($scope){
// $scope 我们叫做作用域
// 申明一个Model
$scope.name = '张三';
$scope.age = 20;
});
注意上述代码:
{{name}}
{{age}}
如果当网络慢时,页面还未渲染,页面将会直接显示上述内容。 所以需要使用ng-bind指令。 上述内容替换为
<div ng-bind="name"></div>
<div ng-bind="age"></div>
Last updated
Was this helpful?