Anglejs 데이터 바인딩 실패에 대한 솔루션

관련 권장사항: "angularjs Tutorial"

저는 모든 사람들이 제가 지금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은 입력된 이름과 동일한 범위에 있는 값이 아니므로 당연히 변경할 수 없습니다.

Scope

모든 Angular 애플리케이션에는 기본적으로 루트 범위 $rootScope가 있습니다. 루트 범위는 최상위 수준에 있으며 모든 수준의 범위가 그 아래에 있습니다.

일반적으로 페이지의 ng-model에 바인딩된 변수는 해당 컨트롤러에서 정의됩니다. 현재 범위에 변수가 정의되어 있지 않으면 JavaScript는 범위 상속인 현재 컨트롤러의 프로토타입을 검색합니다.

Solution

<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 범위

이 경우 둘의 데이터는 동일한 참조이며, 이 개체의 속성을 수정하면 두 수준 개체에 반영될 수 있습니다.
실제 상황은 컨트롤러가 범위를 생성할 수 있을 뿐만 아니라 ng-if와 같은 명령어도 (암시적으로) 새 범위를 생성한다는 것입니다. 요약하자면, ng-if, ng-switch, ng-include 및 동적으로 인터페이스를 생성할 수 있는 기타 항목에는 모두 고유한 첫 번째 수준 범위가 있습니다. 따라서 개발 프로세스 중에는 개체 참조를 최대한 많이 사용해야 합니다.

컴퓨터 프로그래밍에 대한 더 많은 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 Anglejs 데이터 바인딩 실패에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!