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

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

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

問題描述：

//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)容時，綁定的description完全沒更新，只能用chrome插件ng-inspector看一下。

圖1 初始scope

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

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

Angular Scope Inheritance

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

圖3 初始scope

圖 4 錯誤的給ChildCtrl添加了description

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

$scope的繼承是原型鏈繼承，有兩個特點：

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

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

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

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

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

只需改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的詳細(xì)圖文解說