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>

コードに示されているように、入力の値を変更すると、変数名の値も変更されるはずです。データの変更によるもので、変更は双方向バインディングを通じて行われ、入力の値と一致します。ただし、実際には視界の変化は起こりません。
その理由は、ng-if がスコープを分離し、新しいスコープを作成するためです。その結果、scope.name は入力内の名前と同じスコープ内の値ではないため、変更できません。

スコープ

各 Angular アプリケーションには、デフォルトでルート スコープ $rootScope があります。ルート スコープは最上位にあり、そこから下位にあります。 . すべてのレベルに吊り下げスコープ。

通常、ページ内の ng-model にバインドされている変数は、対応するコントローラーで定義されます。現在のスコープで変数が定義されていない場合、JavaScript は現在のコントローラーのプロトタイプ (スコープの継承) を介して検索します。

解決策

<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 は次と同等です。子スコープ。この時点では、データを参照することによって双方向のデータ バインディングを実現できます。

ng-if のスコープ

この場合、2 つのデータはこのオブジェクトへの同じ参照です。プロパティへの変更は次のとおりです。 2 レベルのオブジェクトに反映されます。
実際の状況では、コントローラーがスコープを作成できるだけでなく、ng-if などの命令も (暗黙的に) 新しいスコープを生成します。要約すると、ng-if、ng-switch、ng-include、およびインターフェースを動的に作成できるその他のものはすべて、独自の第 1 レベルのスコープを持っています。したがって、開発プロセス中はオブジェクト参照を可能な限り使用する必要があります。

コンピュータ プログラミングの詳細については、プログラミング入門をご覧ください。 ！

以上がangularjsデータバインディングの失敗に対する解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。