ngIf 내의 바인딩된 요소는 바인딩을 업데이트하지 않습니다.

ngIf 내의 바인딩된 요소는 바인딩을 업데이트하지 않습니다.

나는 angularjs 지시문을 작성했다.이 디렉티브의 템플릿에 ngIf 디렉티브를 추가하고 그 안에 디렉티브의 범위에 바인드된 입력을 표시합니다.

<div ng-if="bool"><input ng-model="foo"></div>

많은 시행착오 끝에 입력 텍스트 변경 시 ngIf 지시로 인해 모델이 업데이트되지 않는다는 것을 알게 되었습니다.ngShow로 변경하면 모든 것이 예상대로 작동합니다.

나는 이 차이에 대한 설명을 찾고 있다.

여기에 jsfiddle을 만들었습니다.

ngIf가 새로운 자 스코프를 작성하기 때문에 다른 입력과 같은 스코프에 바인드하고 싶다면 $parent로 한 단계 내려갈 수 있습니다.범위 상속에 대한 자세한 내용은 여기를 참조하십시오.

  angular.module('testApp', [])
  .directive('testDir', function () {
    return {
      restrict: 'A',
      template: '<input ng-model="foo"><input ng-model="foo">' +
         '<div ng-if="bool"><input ng-model="$parent.foo"></div>',
      link: function (scope, elem, attrs) {
        scope.foo = "bar";
        scope.bool = true;       
      }
    }
  });

새로운 jsfiddle 보기

이 문제는 스코프에서 프리미티브를 사용하기 때문에 발생합니다.

ngIf새 자식 스코프를 만들고 부모 스코프의 값을 음영으로 만듭니다.

대신 점 표기법을 사용합니다.

<div ng-if="bool"><input ng-model="data.foo"></div>

---

범위 Wiki의 개요:

일반적으로 스코프 상속은 간단합니다.또, 대부분의 경우, 이러한 상속이 발생하고 있는 것을 알 필요도 없습니다.하위 스코프 내부에서 상위 스코프에 정의된 원시(예: 숫자, 문자열, 부울)에 대한 양방향 데이터 바인딩(예: 폼 요소, ng-model)을 시도할 때까지.

그것은 대부분의 사람들이 예상하는 대로 작동하지 않는다.이 경우 하위 스코프가 동일한 이름의 상위 속성을 숨기거나 섀도우하는 자체 속성을 가져옵니다.이건 Angular가 아니야JS는 이를 통해 JavaScript 프로토타입 상속을 수행하고 있습니다.

새 각도JS 개발자들은 종종 ng-repeat, ng-switch, ng-view 및 ng-include가 모두 새로운 하위 범위를 생성한다는 것을 깨닫지 못한다. 따라서 이러한 지침이 관련될 때 문제가 종종 나타난다.

ng-model에 항상 '.'를 붙이는 '베스트 프랙티스'를 따름으로써 이 프리미티브에 관한 문제를 쉽게 피할 수 있습니다.

foo를 속성을 가진 개체로 정의합니다.이 모든 것은 Javascript 프로토타입 상속과 관련이 있습니다.수정된 jsfiddle을 참조하십시오.

 angular.module('testApp', [])
  .controller('MyController',function($scope){
      $scope.foo = {bool: true};
  })
  .directive('testDir', function () {
    return {
      restrict: 'A',
      template: '<input ng-model="foo.x"><input ng-model="foo.x"><div ng-if="foo.bool"><br/>changing me does not update the other inputs because i am in an ngIf if in ngShow all works just fine<input ng-model="foo.x"></div>',
      link: function (scope, elem, attrs) {
        scope.foo.x = "bar";
        scope.foo.bool = true;       
      }
    }
  });

상세한 것에 대하여는, 이 비디오를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/21512182/bound-element-inside-ngif-does-not-update-binding