在看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 functionfunction 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
原文地址：https://www.cnblogs.com/fogwind/p/8944835.html