angularjs數(shù)據(jù)綁定失效怎么辦

這篇文章主要介紹angularjs數(shù)據(jù)綁定失效怎么辦，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

相信大家在進行angularjs開發(fā)的時候也會遇到我現(xiàn)在遇到的問題：明明頁面進行了雙向數(shù)據(jù)綁定，而且數(shù)據(jù)已經(jīng)改變了，但是視圖卻并未刷新。

代碼示例

<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的值應(yīng)該會因為數(shù)據(jù)的雙向綁定而進行改變，與input的value保持一致。但是，實際上卻沒有發(fā)生視圖上的變化。
原因就是因為ng-if會隔離作用域，創(chuàng)建新的作用域。使得scope.name壓根與input里的name不是一個作用域上的值，自然無法做出更改。

作用域

每個 Angular 應(yīng)用默認有一個根作用域 $rootScope， 根作用域位于最頂層，從它往下掛著各級作用域。

通常情況下，頁面中 ng-model 綁定的變量都是在對應(yīng)的 Controller 中定義的。如果一個變量未在當(dāng)前作用域中定義，JavaScript 會通過當(dāng)前 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相當(dāng)于子級作用域，此時通過引用data便可實現(xiàn)雙向數(shù)據(jù)綁定。

ng-if中的作用域

在這種情況下，兩者的 data 是同一個引用，對這個對象上面的屬性修改，是可以反映到兩級對象上的。
實際情況是并不是只有 Controller 可以創(chuàng)建作用域，ng-if 等指令也會（隱式地）產(chǎn)生新作用域?？偨Y(jié)下來就是，ng-if、 ng-switch 、 ng-include 等會動態(tài)創(chuàng)建一塊界面的東西，都是自帶一級作用域。因此，在開發(fā)過程中應(yīng)盡可能的使用對象引用。

以上是“angularjs數(shù)據(jù)綁定失效怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！