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 -- huaQconsole.log(ctrl.$viewValue);// view value -- NaNconsole.log(ctrl.$modelValue);// model value -- NaN console.log(ctrl);element.on('focus',function(e) {console.log(element[0].value);console.log(ctrl.$viewValue);// view valueconsole.log(ctrl.$modelValue);// model value });element.on('blur',function(e) {element[0].value = 'doulao';//DOM valueconsole.log(element[0].value);console.log(ctrl.$viewValue);// view valueconsole.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的不同。
转载于:https://www.cnblogs.com/fogwind/p/8944835.html
AngularJS中的DOM value与view value相关推荐
- 如果我有jQuery背景,那么“ AngularJS中的思考”吗? [关闭]
已关闭 . 这个问题需要更加集中 . 它当前不接受答案. 想改善这个问题吗? 更新问题,使其仅通过编辑此帖子来关注一个问题. 4年前关闭. 已锁定 . 该问题及其答案被锁定,因为该问题是题外话,但具有 ...
- AngularJS 控制器中处理DOM事件
# AngularJS 控制器中处理DOM事件 标签(空格分隔): AngularJS - AngularJS应用中的DOM事件可以在控制器中完成.AJ框架为我们提供了事件绑定指令,只需要在原生的av ...
- 理解AngularJS中的依赖注入
作者 CraftsCoder 冷月无声 - 博客频道 - CSDN.NET http://blog.csdn.net/jaytalent/article/details/50986402 本文结合一些 ...
- 数据绑定如何在AngularJS中运行?
本文翻译自:How does data binding work in AngularJS? How does data binding work in the AngularJS framework ...
- AngularJS中自定义指令
AngularJS中除了内置指令,还可以自定义指令.自定义指令和自定义过滤器一样,有两种方法: 第一种,在module中配置:$compileProvider.directive('directive ...
- AngularJs中的directives(指令part1)
一.指令的职责 指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...
- AngularJS中的指令全面解析(必看)
出处: http://www.jb51.net/article/84665.htm 说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的 ...
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
- html5中的dom中的各种节点的层次关系是怎样的
html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
最新文章
- 开启MySQL的sql语句记录
- 宅福利-宅家抗疫,你我同在2020-01-30
- Bootstrap常用类
- 【Android】Android Service的生命周期
- 高级语言程序设计(c )试卷,《高级语言程序设计C》试卷
- 华强北三代悦虎1562A怎么样?
- OpenJTAG调试S3C2440裸板程序
- C++/C--set常见用法详解【转载】
- android 关于提高第三方app的service优先级
- dotween路径移动_使用DOTween Pro插件设置物体移动的位置、移动的方式、以及动画结束时执行方法...
- 深入学习 Intellij IDEA 调试技巧
- python regularexpress1
- Keil uVison4下载、安装、使用说明
- echart添加文本_ECharts自定义富文本
- qt:qt5.12警告消除大法之 warning: zero as null pointer constant
- JVM MAT分析器中的shallow heap 和 retained heap详解
- 【技法操作】UI界面设计,用PS绘制定位app页面设计教程
- FireFoxOS 初体验
- 实现条码枪的无焦点扫码
- 什么是阻抗?影响阻抗的因素有哪些?
热门文章
- LeetCode刷题——63. 不同路径 II
- 职场三剑客,助你从容闯职场
- 各路技术牛人都推荐的书
- 损失函数、tensorflow2实现——Python实战
- 2.4 HDFS组成架构
- 43特征01——特征值、特征向量、特征值与特征向量的判定、矩阵与线性变换的特征关系、方阵的迹、特征多项式、Hamilton-Cayley 定理、特征值和特征向量基本性质、谱分解、奇异值分解
- python装饰器Decorators
- react 引入轮播插件_如何在react中引入swiper滑动插件
- ue4如何恢复初始状态_UnrealEngine4初始化流程
- postgresql开启历史查询记录日志