數據雙向綁定頁面無反應（angularjs）

問題引入

使用 angularjs進行過一段時間的開發後，基本上都會遇到一個這樣的坑：頁面進行了雙向數據綁定，控制層的數據也已經改變了，可是視圖層的數據卻沒有改變。

其實形成這個問題的緣由大體分爲如下幾個

1. scope做用域發生的繼承
2. 操做了dom層，數據更改，卻沒有觸發angularjs的服務。沒有更新視圖層。

scope做用域的繼承

先看個實例。

<div ng-controller="TestCtrl">
  <p>{{name}}</p>
  <div ng-if="show">
    <input type="text" ng-model="name">
  </div>
</div>
<script>
function TestCtrl($scope){
    $scope.show = true;
    $scope.name = 'htf';
}
</script>

上面的code，按道理說，咱們在改變input的值時，變量name的值應該會由於數據的雙向綁定而進行改變，與input的value保持一致。

可是，實際上卻沒有發生視圖上的變化。緣由就是由於ng-if會隔離做用域，建立新的做用域。使得scope.name壓根與input裏的name不是一個做用域上的值，天然沒法作出更改。

做用域

每一個 Angular 應用默認有一個根做用域 $rootScope， 根做用域位於最頂層，從它往下掛着各級做用域。

一般狀況下，頁面中 ng-model 綁定的變量都是在對應的 Controller 中定義的。若是一個變量未在當前做用域中定義，JavaScript 會經過當前 Controller 的 prototype 向上查找，也就是做用域的繼承。

這種狀況也能夠經過scope.$parent進行訪問。

 

那麼，若是上下級做用域想共用變量怎麼辦呢？引用類型變量

答案是使用引用類型變量。

<div ng-controller="OuterCtrl">
  <p>{{x}}</p>
  <div ng-controller="InnerCtrl">
    <input type="text" ng-model="x">
  </div>
</div>
<script>
function OuterCtrl($scope){
    $scope.data = {};
    $scope.data.x = 'hello';
}
function InnerCtrl($scope){
}
</script>

 如上，即可實現理想中的數據雙向綁定。

ng-if中的做用域

在這種狀況下，二者的 data 是同一個引用，對這個對象上面的屬性修改，是能夠反映到兩級對象上的。

前面講的是兩級控制器之間的做用域，那跟前面提到的問題有什麼關係呢？那個看着不是隻有一個 Controller 嗎？

其實，並非只有 Controller 能夠建立做用域，ng-if 等指令也會（隱式地）產生新做用域。

總結下來就是，ng-if、 ng-switch 、 ng-include 等會動態建立一塊界面的東西，都是自帶一級做用域。

所以，在開發過程當中，爲了不模板中的變量歧義，應當儘量使用命名限定，好比 data.x，出現歧義的可能性就比單獨的 x要少得多。

總結

始終將頁面中的元素綁定到對象的屬性（data.x）而不是 直接綁定到基本變量（x）上。