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的不同。

posted @ 2019-02-25 14:29  Fogwind  阅读(641)  评论(0)  编辑  收藏  举报