相關推薦：《angularjs教學》
#相信大家在進行angularjs開發的時候也會遇到我現在遇到的問題：明明頁面進行了雙向資料綁定，而且資料已經改變了，但是視圖卻並未刷新。
程式碼範例
<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 = 'xiao ming';
}
</script>依照程式碼所展示的，我們在改變input的值時，變數name的值應該會因為資料的雙向綁定而進行改變，與input的value保持一致。但是，實際上卻沒有發生視圖上的變化。
原因就是因為ng-if會隔離作用域，建立新的作用域。使得scope.name壓根與input裡的name不是作用域上的值，自然無法做出改變。
作用域
每個Angular 應用預設有一個根作用域$rootScope， 根作用域位於最頂層，從它往下掛著各級作用域。
通常情況下，頁面中 ng-model 綁定的變數都是在對應的 Controller 中定義的。如果一個變數未在目前作用域中定義，JavaScript 會透過目前 Controller 的 prototype 向上查找，也就是作用域的繼承。
解決方案
<div ng-controller=“testCtrl">
<p>{{data.name}}</p>
<div ng-if="show">
<input type="text" ng-model="data.name">
</div>
</div>
<script>
function testCtrl($scope){
$scope.show = true;
$scope.data = {};
$scope.data.name = 'xiao ming';
}
</script>ng-if其實是隔離出了一塊作用域，此時testCtrl是父級作用域，ng- if相當於子級作用域，此時透過引用data便可實現雙向資料綁定。
ng-if中的作用域
在這種情況下，兩者的data 是同一個引用，對這個物件上面的屬性修改，是可以反映到兩級物件上的。
實際情況是不是只有 Controller 可以建立作用域，ng-if 等指令也會（隱含地）產生新作用域。總結下來就是，ng-if、 ng-switch 、 ng-include 等會動態創建一塊介面的東西，都是自帶一級作用域。因此，在開發過程中應盡可能的使用物件引用。
更多電腦程式相關知識，請造訪：程式設計入門！ ！
以上是angularjs資料綁定失效的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
