Angular 笔记系列(二)数据绑定
2024-08-31 13:43:36
数据绑定这块儿没啥说的,简单两个例子带过了。
Hello World:
<!DOCTYPE html>
<html ng-app>
<head> <title>Simple app</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head>
<body>
<input ng-model="name" type="text" placeholder="Your name">
<h1>Hello {{ name }}</h1>
</body>
</html> 这就是有趣的双向数据绑定,AngularJS 会记录数据模型所包含的数据在任何特定时间点的值,而不是原始值。当他认为某个值可能发生变化时,
就会运行自己的事件循环来检查这个值是否变脏,如果该值从上次事件循环之后发生了变化,则该值被认为是脏值。这也是 Angular 可以跟踪和响应应用变化的方式。 数据模型对象:这里是指$scope。它的属性可以被视图访问,也可以同控制器交互。
数据绑定的最佳实践:
由于 JS 本身的特点,以及他在引用和传值时的不同处理方式,通常认为,,在视图中通过对象的属性而非对象本身来进行数据绑定,是 Angular的最佳实践。 一个简单的计时器:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{ clock.now }}!</h1>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
//app.js
function MyController($scope) {
$scope.clock = {
now: new Date()
};
var updateClock = function() {
$scope.clock.now = new Date()
};
setInterval(function() {
$scope.$apply(updateClock);
},1000)
updateClock();
};
关于脏值检查相关请参考:
http://www.cnblogs.com/Slim-Shady/p/5217221.html
最新文章
- erlang 虚机性能调优
- 快排查找第K小的数
- JS的prototype
- GUID相关知识
- Xdebug 配置
- Yii2框架打包成Phar包报错的经历
- BZOJ4556: [Tjoi2016&;Heoi2016]字符串
- Spring3 整合Hibernate3.5 动态切换SessionFactory (切换数据库方言)
- 这些HTML、CSS知识点,面试和平时开发都需要 (转)
- php-mysql-excel
- C++学习21 基类和派生类的赋值
- 《Numerical Methods》-chaper4-一元非线性方程的解
- mysql hash索引优化
- Java Notes 00 - Singleton Pattern(单例总结)
- Address already in use: JVM_Bind <;null>;:8080
- java 文件处理
- Linux高性能server编程——高级I/O函数
- java设计模式之九外观模式(Facade)
- HTML里为什么不能在<;p>;标签中嵌套<;div>;标签
- 就算会用python画颗心,可你依然还是只单身狗