Ng-model이 컨트롤러 값을 업데이트하지 않음

Ng-model이 컨트롤러 값을 업데이트하지 않음

아마 어리석은 질문일 것입니다만, 간단한 입력과 버튼이 있는 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, empty를 $scope.search = {};관제사 안에 물체가 있고, voila...동작하는 이유를 알 수 없습니다;]

ng-model' 'ng-model' 'ng-model' 'ng-model' 'ng-model' 'ng-model' 'ng-mod
object.

컨트롤러

$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=SBwoFkRjZvE&t=3m15s

컨트롤러 버전(권장)

템플릿이 여기에 있습니다.

<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);
}

Angular를 사용한 웹 애플리케이션 개발 마스터링JS북 페이지 19, 라고 쓰여있다.

범위 속성에 직접 바인딩하지 마십시오.개체 속성에 대한 양방향 데이터 바인딩(스코프에 표시됨)이 선호됩니다.경험에 비추어 볼 때 ng-model 지시문에 제공된 식에 점이 있어야 합니다(예: ng-model="thing.name").

스코프는 JavaScript 객체일 뿐이며 돔 계층을 모방합니다.JavaScript Prototype Inheritance에 따르면 스코프 속성은 스코프를 통해 구분됩니다.이를 피하기 위해 닷 표기법을 사용하여 ng-model을 바인드해야 합니다.

「」를 사용합니다.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의 사전 스코프 기능으로 인해 실제로는 부모 $120을 참조합니다.

이 문제를 겪고 있는 누군가가 이 방법으로 테스트해서 우리에게 알려주면 좋을 것 같습니다.

같은 문제가 발생했는데 컨트롤러 상단에서 먼저 공백 개체를 선언하지 않았기 때문입니다.

$scope.model = {}

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

이것이 당신에게 효과가 있기를 바랍니다!

사소한 뷰(네스트된 스코프도 있습니다)를 취급할 때도 같은 문제가 있었습니다.그리고 마침내 이것이 Angular를 개발할 때 알려진 까다로운 것이라는 것을 알게 되었다.자바 스크립트의 프로토타입 기반 상속 특성으로 인한 JS 애플리케이션.각진JS 중첩 스코프는 이 메커니즘을 통해 생성됩니다.또한 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를 사용하고 있었습니다.문제는 html을 ng-view 요소에 삽입할 때 angular ALways가 새로운 스코프를 생성한다는 것입니다.그 결과, 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'를 개체 내부의 속성으로 설정하는 것입니다.

근데 그냥 끈으로 놔두면 어떡하지?여기서 언급한 방법은 다 해봤는데 아무 것도 안 먹혔어
그러나 문제는 시작에만 있다는 것을 깨달았기 때문에 값 속성을 설정하기만 하면 효과가 있었습니다.

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

이렇게 하면 값이 '$scope'로 설정됩니다.searchText' 값은 입력값이 변경되면 갱신됩니다.

회피책인 건 알지만 나한테는 효과가 있었어

나도 같은 문제에 직면해 있었어이 키워드를 사용하는 것이, 나에게 있어서 효과가 있던 결의가…….

alert(이것)모델명);

양식 컨트롤에 이름 속성 제공

언급URL : https://stackoverflow.com/questions/12618342/ng-model-does-not-update-controller-value