textarea的内容改变，绑定的model却没更新

leeon 发布于2019-08-21 10:44 / 2242人阅读

摘要：问题描述我修改的内容时，绑定的完全没更新，只能用插件看一下。也就是说与绑定的实际上是中的。只需改，将显示绑定到使用对象的形式来绑定为什么一个就能解决问题了呢，以第二个方法为例。

问题描述：

//app.js
angular.module("deapp", [])
.controller("ParentCtrl", ["$scope", ParentCtrl])
.controller("ChildCtrl", ["$scope", ChildCtrl]);

function ParentCtrl($scope) {
  $scope.description = "";
}

function ChildCtrl($scope) {
}

//index.html

我修改textarea的内容时，绑定的description完全没更新，只能用chrome插件ng-inspector看一下。

图1 初始scope

图2 输入后ChildCtrl 出现description

所以可以看到问题变成了Angular Scope Inheritance

Angular Scope Inheritance

我用word文档画了scope的继承图示，如下

图3 初始scope

图 4 错误的给ChildCtrl添加了description

在这个图可以看到实际上并没有更新父级scope的description，反而在当前所在的ChildCtrl scope新建了description。也就是说与textarea绑定的model实际上是ChildCtrl scope中的description。

$scope的继承是原型链继承，有两个特点：

读子类的属性时，子类有这个属性（hasOwnProperty）的时候则读子类自己的，子类没有的时候读父类的，不管子类有没有这个属性，在子类上都不会有新属性被创建。

写子类的属性时，如果子类有这个属性（hasOwnProperty）则写子类的，子类没有的话就会在子类上新建一个同名的新属性，而父类继承过来的属性被隐藏。
————来自http://pinkyjie.com/2015/02/07/prototypal-inheritance-of-scope-in-angularjs/

所以对于description也是一样，读description时，先在ChildCtrl中读，读不到就到ParentCtrl中读，所以事先给ParentCtrl的description设置的初始值，在页面刷新后是可以显示出来的。

但是，写description的时候就不一样了，在ChildCtrl中找不到就直接创建一个新的属性，父级scope的同名属性就被隐藏了，textarea绑定的模型也就变成了ChildCtrl scope中的description，往后再怎么修改textarea的内容，父级scope的description永远保持原来的值。

这不是我想看到的，办法是有的，使用.就能解决这个问题了。

只需改html，将textarea显示绑定到$parent.description

使用对象的形式来绑定description

// app.js
function ParentCtrl($scope) {

 $scope.info = {
   description: "156"
 };

}

function ChildCtrl($scope) {
}

// index.html

为什么一个.就能解决问题了呢，以第二个方法为例。
写的时候是写info.description，需要先读info，ChildCtrl没有info，于是去ParentCtrl读，找到info后，就写父级scope的info.description。
Angular Scope Inheritance的详细图文解说

云服务器 GPU云服务器内容改变改变文字内容改变网站的域名改变视频格式的软件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86102.html

【Vue原理】VModel - 白话版

摘要：执行的时候，会绑定上下文对象为组件实例于是中的就能取到组件实例本身，的代码块顶层作用域就绑定为了组件实例于是内部变量的访问，就会首先访问到组件实例上。其中的获取，就会先从组件实例上获取，相当于。写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得...

keke 2019-08-23 18:25 评论0 收藏0
【Vue原理】VModel - 源码版之表单元素绑定流程

摘要：首先，兄弟，容我先说几句涉及源码很多，篇幅很长，我都已经分了上下三篇了，依然这么长，但是其实内容都差不多一样，但是我还是毫无保留地给你了。写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也...

sarva 2019-08-23 18:25 评论0 收藏0
Vue面试中，经常会被问到的面试题/知识点(2019改进版)

摘要：在第一版的基础上进行了优化，新增一些面试题知识点，对一些知识点进行更加深入的描述。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。改变中的状态的唯一途径就是显式地提交。这两个可以在不进行刷新的情况下，操作浏览器的历史纪录。在第一版的基础上进行了优化，新增一些面试题/知识点，对一些知识点进行更加深入的描述。一、对于MVVM的理解？ MVVM 是 Model-View-Vie...

singerye 2019-08-26 11:00 评论0 收藏0
用ES6的class模仿Vue写一个双向绑定

摘要：原文地址的博客点击在线尝试一下最终效果如下构造器构造一个对象，包含基本的，，初始化编译器用于解析绑定到输入框和下拉框的和元素的点击事件。原文地址：Bougie的博客点击在线尝试一下最终效果如下： showImg(https://segmentfault.com/img/remote/1460000014485648?w=470&h=421); 构造器(construct...

waltr 2019-08-22 16:32 评论0 收藏0
VueJS源码学习——项目结构&目录

摘要：所以整个的核心，就是如何实现这三样东西以上摘自囧克斯博客的一篇文章从版本开始这个时候的项目结构如下源码在里面，为打包编译的代码，为打包后代码放置的位置，为测试代码目录。节点类型摘自资源另一位作者关于源码解析本项目的源码学习笔记是基于 Vue 1.0.9 版本的也就是最早的 tag 版本，之所以选择这个版本，是因为这个是最原始没有太多功能拓展的版本，有利于更好的看到 Vue 最开始的骨...

ad6623 2019-08-20 19:01 评论0 收藏0