리뷰나라 - Page 43425 of 45092

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

아마도 어리석은 질문이지만 간단한 입력과 버튼으로 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한 다음 $scope.search = {};컨트롤러와 voila에 빈 객체 를 정의 해야했습니다 … 왜 작동하는지 모르겠습니다. 그러나 ;]

답변

버전 별 컨트롤러 (권장)

여기 템플릿

<div ng-app="example" ng-controller="myController as $ctrl">
    <input type="text" ng-model="$ctrl.searchText" />
    <button ng-click="$ctrl.check()">Check!</button>
    {{ $ctrl.searchText }}
</div>

angular.module('example', [])
  .controller('myController', function() {
    var vm = this;
    vm.check = function () {
      console.log(vm.searchText);
    };
  });

예 : http://codepen.io/Damax/pen/rjawoO

Angular 2.x 또는 Angular 1.5 이상에서 구성 요소를 사용하는 것이 가장 좋습니다.

########

옛날 방식 (권장하지 않음)

문자열은 원시적이므로 대신 객체를 사용하는 것이 좋습니다.

마크 업에서 이것을 시도하십시오

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

그리고 이것은 컨트롤러에서

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

답변

“ng-model을 사용한다면 거기에 점이 있어야합니다.”

모델이 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-repeats와 같은 자식 범위가 재생 중일 때 발생합니다. 자식 범위는 자체 가치를 만들고 여기에 설명 된대로 이름 충돌이 발생 합니다 .

자세한 내용은이 비디오 클립을 참조하십시오 : https://www.youtube.com/watch?v=SBwoFkRjZvv&&

답변

AngularJS를 사용한 웹 응용 프로그램 개발 책 p.19에서는 다음과 같이 작성되었습니다.

범위 속성에 직접 바인딩을 피하십시오. 범위에 노출 된 개체 속성에 대한 양방향 데이터 바인딩이 선호되는 접근 방식입니다. 경험상 ng-model 지시문에 제공된 표현식에 점이 있어야합니다 (예 : ng-model = “thing.name”).

범위는 JavaScript 객체 일 뿐이며 dom 계층 구조를 모방합니다. JavaScript Prototype Inheritance 에 따르면 범위 속성은 범위를 통해 분리됩니다. 이를 피하려면 도트 표기법 을 사용하여 ng 모델을 바인딩해야합니다.

답변

작품 this대신 사용 $scope.

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를 나타냅니다 .

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

답변

나는 같은 문제가 있었고 컨트롤러의 맨 앞에 빈 객체를 먼저 선언하지 않았기 때문입니다.

$scope.model = {}

<input ng-model="model.firstProperty">

이것이 당신을 위해 작동하기를 바랍니다!

답변

사소한보기 (중첩 범위가 있음)를 처리 할 때 동일한 문제가 발생했습니다. 그리고 마침내 프로토 타입 기반의 자바 스크립트 상속 특성으로 인해 AngularJS 애플리케이션을 개발할 때 이것이 알려진 까다로운 일이라는 것을 발견했습니다. AngularJS 중첩 범위는이 메커니즘을 통해 생성됩니다. 그리고 ng-model에서 생성 된 값은 부모 범위 (컨트롤러에 주입 된 것일 수도 있음)에 값이 표시되지 않는다고 말하지 않고 자식 범위에 배치됩니다. 점을 사용하지 않으면 값이 부모 범위에 정의 된 동일한 이름을 가진 모든 속성을 음영 처리합니다 프로토 타입 참조 액세스를 시행합니다. 자세한 내용은이 문제를 설명하기위한 온라인 비디오 ( http://egghead.io/video/angularjs-the-dot/) 와 그 뒤의 설명을 확인하십시오.

답변

이 바이올린을보십시오 http://jsfiddle.net/ganarajpr/MSjqL/

나는 당신이하고있는 일을 정확하게 수행했으며 작동하는 것 같습니다. 여기서 작동하지 않는 것을 확인할 수 있습니까?