AngularJS中的DOM value与view value
在看AngularJS的文档的时候经常会见到三个名词：DOM value、view value和model value。
model value是模型值，view value是视图值，可这个DOM value是什么呢？
之前，我一直以为DOM value就是view value，他们两个是相同的。可是随着看的文档越来越多，我发现我越来越糊涂了：他们两个不是一样吗，为什么文档中一会儿DOM value，一会儿又是view value呢？
有了上面的疑问，所以就有了下面的内容。
废话不多说，看代码：
HTML代码：
<!DOCTYPE html>
<html lang="en" ng-app="restrictApp">
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title>directive---测试</title>
</head>
<body>
<div ng-controller="testOne">
{{title}}///{{testValue}}
<div>
<input first-directive type="text" ng-model="testValue" value="huaQ" />
</div>
</div>
<script src="js/service.js"></script>
<script src="js/restrict.js"></script>
</body>
</html>
service.js
var testService = angular.module('testService',[]);
//使用factory注册
testService.factory('pageTitle',pageTitleFactory);
//下面是一个service factory function
function pageTitleFactory() {
console.log('test service........');
var title = {
pageTitle:'hello world'
};
return title;
}
pageTitleFactory.$inject = ['$rootScope'];
restrict.js
var restrictApp = angular.module('restrictApp',['testService']);
restrictApp.directive('firstDirective', function ($timeout) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
console.log(element[0].value);//DOM value -- huaQ
console.log(ctrl.$viewValue);// view value -- NaN
console.log(ctrl.$modelValue);// model value -- NaN
console.log(ctrl);
element.on('focus',function(e) {
console.log(element[0].value);
console.log(ctrl.$viewValue);// view value
console.log(ctrl.$modelValue);// model value
});
element.on('blur',function(e) {
element[0].value = 'doulao';//DOM value
console.log(element[0].value);
console.log(ctrl.$viewValue);// view value
console.log(ctrl.$modelValue);// model value
});
}
};
});
restrictApp.controller('testOne',function($scope,pageTitle) {
$scope.title = pageTitle.pageTitle;
$scope.testValue = 'Original';
});
在浏览器中运行上述代码，在控制台中查看输出结果，将看到以下有趣现象。
首先是编译指令，link函数中输出DOM value的值为'huaQ'，$viewValue和$modelValue的值都为NaN（不知道为什么是NaN）。（猜想：link函数在testOne控制器函数之前执行）
当input元素获得焦点时，控制台输出DOM value、$viewValue和$modelValue的值都为Original。
当input元素失去焦点时，控制台输出DOM value的值为doulao，$viewValue和$modelValue的值没有变，还是Original。为什么$viewValue和$modelValue没有与DOM value同步呢？因为在失去焦点事件函数中没有触发脏检测。
从这个例子可以很明显地看到DOM value与view value的不同。
AngularJS中的DOM value与view value的更多相关文章
- AngularJS中的DOM与事件
前 言 AngularJS中的DOM与事件 AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled="true/false" ...
- angularjs中展示富文本编辑器文本，向DOM中插入元素
前几天在用textangular富文本编辑器插件时,将存储的文本及格式存储到数据库中,但是从后台接口中再向angular页面插入时却不能执行,即在Angular中操作DOM没有实现,后来查看了一下,操 ...
- AngularJS开发指南11：AngularJS的model，controller，view详解
model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...
- AngularJS in Action读书笔记2——view和controller的那些事儿
今天我们来818<angularjs in action>的第三章controller和view. 1.Big Picture概览图 View是angularjs编译html后呈现出来的, ...
- angularJS中的$apply(),$digest(),$watch()
$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...
- 深入学习AngularJS中数据的双向绑定机制
来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...
- AngularJS中使用Directive、Controller、Service
AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...
- 深入了解angularjs中的$digest与$apply方法，从区别聊到使用优化
壹 ❀ 引 如果有人问,在angularjs中修改模型数据为何视图会同步更新呢,我想大多数人一定会回答脏检查(Dirty Checking)相关概念.没错,在angularjs中作用域(scope) ...
- angularjs中的directive scope配置
angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...
随机推荐
- BZOJ5131: [CodePlus2017年12月]可做题2
BZOJ没有题面,差评 洛谷的题目链接 题解 其实这题很久之前就写了,也想写个题解但是太懒了,咕到了今天 在typora写完题解不想copy过来再改格式了,于是直接贴截图qwq #include &l ...
- [luogu 3957]跳房子
题目链接 50分做法 挺显然的一个做法,因为金币量是单调的(如果你花i枚金币可以得到最优解,i+1枚也一定可以),所以可以二分答案 然后对于二分出来的每个答案,都做一遍dp,效率$O(n^2logn) ...
- VS2010下创建WEBSERVICE，第二天 ----你会在C#的类库中添加web service引用吗?
本文并不是什么高深的文章,只是VS2008应用中的一小部分,但小部分你不一定会,要不你试试: 本人对于分布式开发应用的并不多,这次正好有一个项目要应用web service,我的开发环境是vs2008 ...
- 一些WGS健康体检网站和公司
1.wegen https://www.wegene.com/ 2.阅己基因 http://www.selfgene.com/
- go 并发
package main import ( "fmt" "time" ) func say(s string) { ; i < ; i++ { time. ...
- linux下带有空格的文件怎么删除
如:hello world文件 第一种方式 先用 ls -i 得到 hello world 的inod(就是最前面的数字)假设这个数字是123,然后find . -inum -exec rm {} \ ...
- python 插入查找
def interpolation_search(data,val): low= high=len(data)- print('查找过程中......') : mid=low+int((val-dat ...
- Kali Linux下常用软件安装及配置
0x00 Synaptic Synaptic(新立得)是一个高级软件包管理器,它可以管理系统内安装的每个软件及包组件,在图形界面内完成LINUX系统软件的搜寻.安装和删除. Synaptic安装简单, ...
- 模型层model layer
题外话: Django的教程写到这里,就进入了整体的第二部分,也是最关键的部分.此时有一个问题必须想清楚,那就是,以项目带动内容还是以参考书目的方式展开?为此,我考虑了很久. 我在开始学习Django ...
- Docker 容器十诫
[编者按]本文作者为 Rafael Benevides,主要介绍使用 Docker 容器时应该注意的十个陷阱. Docker 容器十诫 当你刚开始使用容器时,会发现容器能解决许多问题,而且好处很多: ...