AngularJS 讲解,一 数据绑定
AngularJS 完全使用javascript 编写的客户端技术。通过原生的Model-View-Controller（MVC，模型视图控制器）功能增强了HTML。这个选择可以快捷和愉悦地构建出令人印象深刻并且极富表现力的客户端应用。
AngularJS的源码托管在GitHub上，可以免费获取。
数据模型对象（model object）是指$scope对象。
数据绑定:
例子:时钟的实现
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>tabs control</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>clock:{{clock}}</h1>
</div>
<script type="text/javascript" src="clock.js"></script>
</body>
</html>
clock.js
(function () {
var app = angular.module("myApp", []);
app.controller('MyController', function ($scope, $timeout) {
var updateClock = function () {
$scope.clock = new Date();
$timeout(function () {
updateClock();
}, )
}
updateClock();
})
})();
数据绑定的最佳实践:
由于JavaScript自身的特点，以及它在传递值和引用时的不同处理方式，通常认为，在视图中
通过对象的属性而非对象本身来进行引用绑定，是Angular中的最佳实践。
修改为：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>tabs control</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>clock:{{clock.now}}</h1>
</div>
<script type="text/javascript" src="clock.js"></script>
</body>
</html>
clock.js
(function () {
var app = angular.module("myApp", []);
app.controller('MyController', function ($scope) {
$scope.clock = {
now: new Date()
}
var updateClock = function () {
$scope.clock.now = new Date();
}
setInterval(function () {
$scope.$apply(updateClock);
}, );
updateClock();
})
})();
这里提到$scope.$apply(),相信大家不知道这个，怎么用和为什么这么用，我刚接触的时候也不明白为什么，然后去查了一下资料，下面大概讲解一个这个$scope.$apply()的用法
1.$scope提供$apply方法传播Model的变化
对于检查绑定的数据到底有没有发生变化，实际上是由$scope.$digest()完成的，但是我们几乎从来就没有直接调用过这个方法，而是调用$scope.$apply()方法，因为在$scope.$apply()方法里面，它会去调用$scope.$digest()方法。$scope.$apply()方法带一个函数或者一个表达式，然后执行它，最后调用$scope.$digest()方法去更新bindings或者watchers。
2.我们什么时候用$apply()
其实我们所有的代码都包在$scope.$apply()里面，像ng−click，controller的初始化，http的回调函数等。在这些情况下，我们不需要自己调用，实际上我们也不能自己调用，否则在apply()方法里面再调用apply()方法会抛出错误。如果我们需要在一个新的执行序列中运行代码时才真正需要用到它，而且当且仅当这个新的执行序列不是被angular JS的库的方法创建的，这个时候我们需要将代码用$scope.$apply()包起来。
AngularJS 讲解,一 数据绑定的更多相关文章
- AngularJS入门之数据绑定
本篇我们看一下AngularJS中的数据绑定.虽然我们直到这篇才提到数据绑定,但事实上在前面几篇中我们已经非常熟练的运用AngularJS的数据绑定功能了! ngBind(ng-bind)/ {{ e ...
- angularJs的一次性数据绑定：双冒号::
angularJs 中双冒号 ::来实现一次性数据绑定. 原文: https://blog.csdn.net/qianxing111/article/details/79971544 -------- ...
- angularjs的双向数据绑定
数据绑定有两个方向: 数据 → 界面:我们使用scope对象的$watch()方法监听数据的变化,来更新界面. <html> <head> <title>监听数据& ...
- angularJs：双向数据绑定
示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...
- AngularJS 讲解,四 Directive
AngularJS Directive 自定义指令(我最喜欢AngularJs的功能之一) 一:什么时候我们会用到directive 1.使html更具语义化,不用深入了解研究代码的逻辑便可知道大致 ...
- AngularJS之双向数据绑定,class绑定
之前一直都是用vue来完成一些日常开发,初入AngularJS,记录一些日常开发遇到的问题. 1.双向数据绑定 AngularJS与vue的区别在于,vue采用的是虚拟DOM,模板文件上绑定的一大堆指 ...
- AngularJS学习之数据绑定
既然AngularJS是以数据作为驱动的MVC框架,在上一篇文章中,也介绍了AngularJS如何实现MVC模式的,所有模型里面的数据,都必须经过控制器,才能展示到视图中. 什么是数据绑定 首先来回忆 ...
- angularjs中的数据绑定
这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-i ...
- AngularJS 作用域与数据绑定机制
AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与 ...
随机推荐
- LaTeX 中插入图片使其紧跟插入的文字之后
LaTeX 中插入图片使其不跑到每页的开头而紧跟插入的文字之后. 此次建模过程中,遇到的一个比较棘手的问题是: 当插入图片时,图片的位置总是会自动跑到当页(或下一页)的最上方,而不是紧跟在其对应的说明 ...
- 严重: Exception starting filter struts2 Unable to load configuration. - [unknown location]
一般来说,按照这个流程下来是没有错的:SSH三大框架合辑的搭建步骤 但是,近来的一个测试例子出现了以下这个问题,困扰了许久!! 各种百度&各种问同学,最后请教了张老师后问题得到解决: 1.这种 ...
- C#光盘刻录
一.背景介绍 最近公司一个老项目需要添加导出数据到光盘的功能.开始对这功能添加有点抵触的.光盘?都啥年代了. 光盘一种即将淘汰的存储媒介.就像当年的随身听,Mp3,Mp4一样,即将退出历史舞台.领导让 ...
- 补习知识：Entity Framework Code First属性映射约定
Entity Framework Code First与数据表之间的映射方式有两种实现:Data Annotation和Fluent API.本文中采用创建Product类为例来说明tity Fram ...
- linux任务计划cron
linux任务计划cron 1.crontab命令任务计划配置文件 [root@bogon ~]# cat /etc/crontab SHELL=/bin/bash PATH=/sbin:/bin:/ ...
- AssionShop开源B2C电子商务系统-(二)定单流程活动图状态图（转载）
B2C系统的灵魂所在就是定单的流程了,下面展示下定单的最重要的两个动态图,一个是定单流程活动图.还有一个是简单的定单状态图.通过这两张图,基本可以 了解系统定单流的大概情况了啊.图画的只是初步的设想, ...
- Sql學習資源
http://blog.csdn.net/wltica/article/category/1324738/1 SQL Server 整体方案系列: 1. SQL Server 数据归档方案 2. SQ ...
- ping: icmp open socket: Operation not permitted 的解决办法
ping: icmp open socket: Operation not permitted 的解决办法:为ping加上suid即可.报错时ping的属性: [root@localhost ~]# ...
- django中使用POST方法 使用ajax后出现“CSRF token missing or incorrect”
这个是因为在django的ajax中默认添加了token,因此需要在cookie中增加token头信息. 首先使用JavaScript函数获取token: function getCookie(nam ...
- C#通过SFTP协议操作文件
本文主要是C#调用SSH实现文件上传下载功能,主要是要引用第三方类库Tamir.SharpSSH.dll. 以下是SFTPHelper类,实现了对文件的操作,可供参考. public class SF ...