angularjs資料綁定失效的解決方法

相關推薦：《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中文網其他相關文章！