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: ...
随机推荐
- json.dump()和json.dmups()的区别
在python中支持json合适的数据是通过json模块实现的. 在序列化json数据的时候遇到两个形状很像的函数,dump()和dumps().主要说说他们的区别 先看看官方文档的说明:https: ...
- hdu 5587 Array 二分
Array Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Problem ...
- C++ 重载new和delete
下边代码对new和delete进行了简单的重载: #include <memory> #include <iostream> #include <cstddef> ...
- maven 下载不到jar包时候，更改阿里源
maven 源 下载太慢,更改国内的阿里源会快一些 <repositories> <repository> <id>alimaven</id> &l ...
- JS 字符串 作为变量名
function initCKEditor(querySelector,content_val,myEditor) { ClassicEditor.create(document.querySelec ...
- NetCat教程
NetCat by Jian Lee 简介 使用 隐藏命令行参数 正/反向域名解析 参数详解 案例 监听端口(制作蜜罐) 端口扫描 ftp 服务器 两台服务器文件校验 使用注意 简介 使用 最简单的使 ...
- MS SQL动态创建临时表
开发业务需求,需要对一个表作数据分析,由于数据量较大,而且分析时字段会随条件相应变化而变化. 因此计划先把数据转插入一个临时表,再对临时表的数据进行分析. 问题点是如何动态创建临时表.原先Insus. ...
- Java 集合-List接口和三个子类实现
List List:有序的 collection(也称为序列).此接口的用户可以对列表中每个元素的插入位置进行精确地控制.用户可以根据元素的整数索引(在列表中的位置)访问元素,并搜索列表中的元素.与 ...
- 为arm 编译包含gd的php5
1) 下载gd的各种依赖包. 但是不要下载gd本身,因为这是包含在php里的. 探索的时候也下载了 libvpx freetype,可惜最后的编译没过,就没有用上 2)编译各种(编译前记得把各种环境变 ...
- WPF 的 数据源属性 和 数据源
(一)数据源(数据对象)属性 :path 或 path的值(path=VM.Property或M.Property),通常具有通知功能(特例除外). (二)path不能孤立而存在,它一定具有所归属的 ...