在看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. HDU 6141 I am your Father!（最小树形图+权值编码）

    http://acm.hdu.edu.cn/showproblem.php?pid=6141 题意: 求最大树形图. 思路: 把边的权值变为负值,那么这就是个最小树形图了,直接套模板就可以解决. 有个 ...

  2. UVa 11235 频繁出现的数值

    https://vjudge.net/problem/UVA-11235 题意: 给出一个非降序排列的整数数组a1,a2,...,an,你的任务是对于一系列询问(i,j),回答ai,ai+1,...a ...

  3. Yandex.Algorithm 2011 Round 2 D. Powerful array 莫队

    题目链接:点击传送 D. Powerful array time limit per test 5 seconds memory limit per test 256 megabytes input ...

  4. 视图层view layer

    视图层是Django处理请求的核心代码层,我们大多数Python代码都集中在这一层面. 它对外接收用户请求,对内调度模型层和模版层,统合数据库和前端,最后根据业务逻辑,将处理好的数据,与前端结合,返回 ...

  5. [ios]ios画线 使用CGContextRef，CGPath和UIBezierPath来绘画

    参考 :http://www.mgenware.com/blog/?p=493 这三种东西:CGContextRef,CGPath和UIBezierPath.本质上都是一样的,都是使用Quartz来绘 ...

  6. socket编程之accept()函数【转载】

    名称 accept() 接收一个套接字中已建立的连接 使用格式 #include <sys/types.h> #include <sys/socket.h> int accep ...

  7. IntelliJ IDE 开发Java GUI 入门

    j主要对java 的GUI相关知识进行简单的介绍和总结,整个博客按照创建一个java GUI的顺序进行介绍,期间穿插讲解用到的java Swing的布局.控件等相关知识.本博客所进行的讲解及工程的创建 ...

  8. centos系统lvm的安装

    今天安装redhat6.1在分区时提示”可引导分区不能位于逻辑卷上“,原来linux的引导区不能放在逻辑卷上. 解决方法: 1.先建立一个物理分区划给/boot分区 2.剩下的空间划给lvm. 然后开 ...

  9. [Android教程] Cordova开发App入门（一）创建android项目

    前言 Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的A ...

  10. docker on mac：误删default vm的处理方法

    通过docker-machine 重新建一个vm,在virtualbox里可以直接看到多出来一个vm docker-machine create --driver virtualbox default