AngularJS中的DOM value与view value
Posted Fogwind
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的主要内容，如果未能解决你的问题，请参考以下文章