在看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的更多相关文章

  1. AngularJS中的DOM与事件

      前 言 AngularJS中的DOM与事件   AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令.  ng-disabled="true/false" ...

  2. angularjs中展示富文本编辑器文本,向DOM中插入元素

    前几天在用textangular富文本编辑器插件时,将存储的文本及格式存储到数据库中,但是从后台接口中再向angular页面插入时却不能执行,即在Angular中操作DOM没有实现,后来查看了一下,操 ...

  3. AngularJS开发指南11:AngularJS的model,controller,view详解

    model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...

  4. AngularJS in Action读书笔记2——view和controller的那些事儿

    今天我们来818<angularjs in action>的第三章controller和view. 1.Big Picture概览图 View是angularjs编译html后呈现出来的, ...

  5. angularJS中的$apply(),$digest(),$watch()

    $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...

  6. 深入学习AngularJS中数据的双向绑定机制

    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...

  7. AngularJS中使用Directive、Controller、Service

    AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...

  8. 深入了解angularjs中的$digest与$apply方法,从区别聊到使用优化

     壹 ❀ 引 如果有人问,在angularjs中修改模型数据为何视图会同步更新呢,我想大多数人一定会回答脏检查(Dirty Checking)相关概念.没错,在angularjs中作用域(scope) ...

  9. angularjs中的directive scope配置

    angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...

随机推荐

  1. BZOJ4419: [Shoi2013]发微博 暴力

    Description 刚开通的SH微博共有n个用户(1..n标号),在短短一个月的时间内,用户们活动频繁,共有m条按时间顺序的记录: ! x   表示用户x发了一条微博: + x y 表示用户x和用 ...

  2. UVa 1663 净化器

    https://vjudge.net/problem/UVA-1663 题意: 给m个长度为n的模板串,每个模板串包含字符0,1和最多一个星号"*",其中星号可以匹配0或1.例如, ...

  3. 基于R进行相关性分析--转载

    https://www.cnblogs.com/fanling999/p/5857122.html 一.相关性矩阵计算: [1] 加载数据: >data = read.csv("231 ...

  4. C++:几种callable实现方式的性能对比

    C++中几种callable实现方式的性能对比 前言 C++中想实现一个callable的对象,通常有四种方式: std::function:最common的方式,一般会配合std::bind使用. ...

  5. C++宏定义不受命名空间的约束

    // xxx.h namespace A { #define xxx() xxxxx } // 在其他文件中,引入xxx.h文件,使用宏定义时,不需要加命名空间 // yyy.cpp #include ...

  6. shell 去掉字符串的单引号

    echo \'deded\' | sed $'s/\'//g'

  7. Codeforces 877E - Danil and a Part-time Job(dfs序+线段树)

    877E - Danil and a Part-time Job 思路:dfs序+线段树 dfs序:http://blog.csdn.net/qq_24489717/article/details/5 ...

  8. 修改unity变量名但不丢失序列化值

    using UnityEngine; using UnityEngine.Serialization; public class LgsTest : MonoBehaviour { [Formerly ...

  9. Java-Java语言

    2017-10-03 21:25:38 Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.J ...

  10. 微服务API网关

    当你选择采用微服务构建自己的程序,则你需要考虑客户端怎样与后端服务交互.对于一个单体应用,仅有一个服务群提供服务(通过负载均衡器实现).在微服务架构里面,每一个服务都暴漏了一个服务器集群.本篇文章我们 ...