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(单页面应用,所有的用户操作都在一个页面中完成).与 ...
随机推荐
- Sphinx-简介及原理
1.Sphinx简介 是一款基于SQL的高性能全文检索引擎(还不支持NoSQL), 主要优点有: 1).创建和重建索引迅速 2).大数据量时检索速度较快 3).为很多脚本语言设计了检索API(如PHP ...
- 学习-短信的上行(MO)和下行(MT)详解
基础知识: SP服务提供商: 通常是指在移动网内运营增值业务的社会合作单位, 它们建立与移动网络建立相连的服务平台, 为手机用户提供一系列信息服务, 如:娱乐.游戏.短信.彩信.WAP.彩铃.铃声下载 ...
- test_login
import unittest,requestsimport ddtfrom BeautifulReport import BeautifulReport as bffrom urllib impor ...
- js操作时间 加法 减法 计算 格式化时间
Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d ...
- Quartz.NET 实现定时任务调度
Quartz.NET Quick Start Guide Welcome to the Quick Start Guide for Quartz.NET. As you read this guide ...
- Heap 3214 LIS题解
依据问题转换成最长不降子序列问题. 10^9的输入数据计算起来还是挺花时间的.由于这里仅仅能使用O(nlgn)时间复杂度了. 只是证明是能够算出10^9个数据的. 由于时间限制是5s. #includ ...
- C#笔试面试宝典值得收藏1
技术类面试.笔试题汇总 注:标明*的问题属于选择性掌握的内容,能掌握更好,没掌握也没关系. 下面的参考解答只是帮助大家理解,不用背,面试题.笔试题千变万化,不要梦想着把题覆盖了,下面的题是供大家查漏补 ...
- linux一条命令添加一个root级别账户并设置密码
内网机器提权添加账户,无回显,设置密码就不好弄,下面就是添加一个root级别的账户并设置密码的命令 ? 1 useradd -p `openssl passwd -1 -salt 'lsof' a ...
- ubuntu下ssh设置firefox用的反向代理
mark一下: ssh -D 127.0.0.1:8080 -l root MyIp
- Jquery学习笔记（9）--注册验证复习（未用到ajax）
纯复习,在$(this).val()这里浪费了时间,val()只适合input里面的value值,如果是span等标签里包裹的文本要用text()!! <!DOCTYPE html> &l ...