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>

JS

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/

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

아무도 이것을 언급하지 않았으므로 $parent바인딩 된 속성 에 추가하여 문제를 해결할 수 있습니다

<div ng-controller="LoginController">
    <input type="text" name="login" class="form-control" ng-model="$parent.ssn" ng-pattern="/\d{6,8}-\d{4}|\d{10,12}/" ng-required="true" />
    <button class="button-big" type="submit" ng-click="BankLogin()" ng-disabled="!bankidForm.login.$valid">Logga in</button>
</div>

그리고 컨트롤러

app.controller("LoginController", ['$scope', function ($scope) {
    $scope.ssn = '';

    $scope.BankLogin = function () {
        console.log($scope.ssn); // works!
    };
}]);

나를 위해 문제를 해결하기 위해 내 데이터를 개체 (여기서는 "데이터")에 저장했습니다.

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'
   }
   

});

도움이 될 것입니다.

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

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

ng-keypress입력 텍스트 입력 및 ng-click아이콘 검색을 활성화하려면 다음을 수행 하십시오 .

<input type="text" ng-model="searchText" ng-keypress="keyEnter(this,$event)" />
<button ng-click="check(searchText)">Check!</button>

in the controller
$scope.search = function (searchText) {
        console.log(searchText);
    }
    $scope.keyEnter = function (serachText,$event) {
        var keyCode = $event.which || $event.keyCode;
        if (keyCode === 13) {//KeyCode for Enter key
           console.log(searchText);
        }
    }

나는 같은 문제가 있었다.
올바른 방법은 'searchText'를 객체 내부의 속성으로 설정하는 것입니다.

그러나 문자열을 그대로 두려면 어떻게해야합니까? 글쎄, 나는 여기에 언급 된 모든 단일 방법을 시도했지만 아무것도 효과가 없었습니다.
그러나 나는 문제가 시작에 불과하다는 것을 알았으므로 value 속성을 설정했는데 효과가있었습니다.

<input type="text" ng-model="searchText" value={{searchText}} />

이 방법으로 값은 '$ scope.searchText'값으로 설정되며 입력 값이 변경 될 때 업데이트됩니다.

나는 그것이 해결 방법이라는 것을 알고 있지만 그것은 나를 위해 일했다 ..

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

alert (this.ModelName);