數據雙向綁定頁面無反應（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）上。