textarea的內(nèi)容改變，綁定的model卻沒更新

leeon 發(fā)布于2019-08-21 10:44 / 2322人閱讀

摘要：問題描述我修改的內(nèi)容時(shí)，綁定的完全沒更新，只能用插件看一下。也就是說與綁定的實(shí)際上是中的。只需改，將顯示綁定到使用對(duì)象的形式來綁定為什么一個(gè)就能解決問題了呢，以第二個(gè)方法為例。

問題描述：

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

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

function ChildCtrl($scope) {
}

//index.html

我修改textarea的內(nèi)容時(shí)，綁定的description完全沒更新，只能用chrome插件ng-inspector看一下。

圖1 初始scope

圖2 輸入后ChildCtrl 出現(xiàn)description

所以可以看到問題變成了Angular Scope Inheritance

Angular Scope Inheritance

我用word文檔畫了scope的繼承圖示，如下

圖3 初始scope

圖 4 錯(cuò)誤的給ChildCtrl添加了description

在這個(gè)圖可以看到實(shí)際上并沒有更新父級(jí)scope的description，反而在當(dāng)前所在的ChildCtrl scope新建了description。也就是說與textarea綁定的model實(shí)際上是ChildCtrl scope中的description。

$scope的繼承是原型鏈繼承，有兩個(gè)特點(diǎn)：


讀子類的屬性時(shí)，子類有這個(gè)屬性（hasOwnProperty）的時(shí)候則讀子類自己的，子類沒有的時(shí)候讀父類的，不管子類有沒有這個(gè)屬性，在子類上都不會(huì)有新屬性被創(chuàng)建。

寫子類的屬性時(shí)，如果子類有這個(gè)屬性（hasOwnProperty）則寫子類的，子類沒有的話就會(huì)在子類上新建一個(gè)同名的新屬性，而父類繼承過來的屬性被隱藏。
————來自http://pinkyjie.com/2015/02/07/prototypal-inheritance-of-scope-in-angularjs/

所以對(duì)于description也是一樣，讀description時(shí)，先在ChildCtrl中讀，讀不到就到ParentCtrl中讀，所以事先給ParentCtrl的description設(shè)置的初始值，在頁面刷新后是可以顯示出來的。

但是，寫description的時(shí)候就不一樣了，在ChildCtrl中找不到就直接創(chuàng)建一個(gè)新的屬性，父級(jí)scope的同名屬性就被隱藏了，textarea綁定的模型也就變成了ChildCtrl scope中的description，往后再怎么修改textarea的內(nèi)容，父級(jí)scope的description永遠(yuǎn)保持原來的值。

這不是我想看到的，辦法是有的，使用.就能解決這個(gè)問題了。

只需改html，將textarea顯示綁定到$parent.description

使用對(duì)象的形式來綁定description

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

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

}

function ChildCtrl($scope) {
}

// index.html

為什么一個(gè).就能解決問題了呢，以第二個(gè)方法為例。
寫的時(shí)候是寫info.description，需要先讀info，ChildCtrl沒有info，于是去ParentCtrl讀，找到info后，就寫父級(jí)scope的info.description。
Angular Scope Inheritance的詳細(xì)圖文解說