[javascript] Ng 모델이 컨트롤러 값을 업데이트하지 않습니다.


Answers

"NG 모델을 사용한다면 거기에 점이 있어야합니다."
모델이 object.property를 가리 키도록하면 좋을 것입니다.

제어 장치

$scope.formData = {};
$scope.check = function () {
  console.log($scope.formData.searchText.$modelValue); //works
}

주형

<input ng-model="formData.searchText"/>
<button ng-click="check()">Check!</button>

이것은 자식 범위가 재생 중일 때 발생합니다 (예 : 자식 경로 또는 ng 반복). 하위 범위는 자체 값을 만들고 여기에 설명 된대로 이름 충돌이 발생 합니다 .

자세한 내용은 다음 동영상을 참조하십시오. https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s

Question

아마 어리석은 질문,하지만 난 간단한 입력과 버튼으로 내 HTML 양식이 있습니다 :

<input type="text" ng-model="searchText" />
<button ng-click="check()">Check!</button>
{{ searchText }}

그런 다음 컨트롤러에서 (템플릿과 컨트롤러는 routeProvider에서 호출됩니다.)

$scope.check = function () {
    console.log($scope.searchText);
}

보기를 올바르게 업데이트했지만 콘솔에서 단추를 클릭 할 때 정의되지 않은 이유는 무엇입니까?

감사!

업데이트 : 나는 그 문제를 해결하기 전에 (몇 가지 해결 방법을 제시하기 전에) 다음과 같이 보입니다 : searchText 에서 search.text 로만 내 속성 이름을 변경 한 다음 empty $scope.search = {}; 를 정의하십시오 $scope.search = {}; 컨트롤러와 voila의 객체 ... 왜 그것이 잘 작동하는지 모르겠다;]




나는 똑같은 문제에 직면했다. 나를 위해 일한 해결책은이 키워드를 사용하는 것이다.

경고 (this.ModelName);




사소한 견해 (중첩 된 범위가 있음)를 다룰 때도 같은 문제가 발생했습니다. 마지막으로 이것은 Java 스크립트의 프로토 타입 기반 상속 특성으로 인해 AngularJS 응용 프로그램을 개발할 때 알려진 까다로운 작업이라는 것을 알았습니다. AngularJS 중첩 스코프는이 메커니즘을 통해 만들어집니다. ng-model에서 생성 된 값은 부모 범위 (컨트롤러에 주입 된 값일 수도 있음)를 나타내지 않고 하위 범위에 배치되며, 값은 표시되지 않으며, 프로토 타입 참조 액세스를 시행합니다. 자세한 내용은이 문제를 설명하는 온라인 동영상 ( http://egghead.io/video/angularjs-the-dot/ 을 확인하십시오.




방금 body-element에 바인딩 된 root_controller를 사용하여이 문제가 발생했습니다. 그런 다음 앵글 라우터와 함께 ng-view를 사용하고있었습니다. 문제는 html을 ng-view 요소에 삽입 할 때 항상 각도가 항상 새 범위를 만듭니다. 결과적으로 내 "검사"기능은 내 ng-model 요소에 의해 수정 된 범위의 상위 범위에 정의되었습니다.

문제를 해결하려면 경로가로드 된 html 콘텐츠 내에 전용 컨트롤러를 사용하십시오.




나에게 문제는 내 데이터를 객체 (여기서는 "datas")에 저장함으로써 해결되었다.

NgApp.controller('MyController', function($scope) {

   $scope.my_title = ""; // This don't work in ng-click function called

   $scope.datas = {
      'my_title' : "",
   };

   $scope.doAction = function() {
         console.log($scope.my_title); // bad value
         console.log($scope.datas.my_title); // Good Value binded by'ng-model'
   }
   

});

나는 그것이 도움이된다고 생각한다.




$scope 대신 this 를 사용 this 작동합니다.

function AppCtrl($scope){
  $scope.searchText = "";
  $scope.check = function () {
    console.log("You typed '" + this.searchText + "'"); // used 'this' instead of $scope
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <div ng-controller="AppCtrl">
    <input ng-model="searchText"/>
    <button ng-click="check()">Write console log</button>
  </div>
</div>

편집 : 이 대답을 쓰고있는 당시 나는 이것보다 훨씬 더 복잡한 상황을 겪었다. 의견을 읽은 후, 나는 그것이 작동하는 이유를 이해하기 위해 그것을 재현하려고 시도했지만, 운이 없다. 나는 어떻게 든 새로운 자식 범위가 생성되고 this 그 범위를 참조하는 이유를 모르겠다. 그러나 $scope 가 사용되면 javascript의 어휘 범위 기능으로 인해 부모 $ scope를 실제로 참조합니다.

이 문제를 겪고있는 누군가가 이런 식으로 테스트하고 알려주면 좋을 것입니다.




Related