Ng-model nie aktualizuje wartości kontrolera

"Jeśli używasz ng-model, musisz mieć tam kropkę."
Niech twój model wskaże obiekt.własność i będziesz gotowy do drogi.

Controller

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

Szablon

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

Dzieje się tak, gdy zakresy dziecięce są w play - like child routes lub ng-repeats. Child-scope tworzy własną wartość i rodzi się konflikt nazw , Jak pokazano tutaj:

Zobacz ten klip wideo, aby dowiedzieć się więcej: https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s

W masteringu tworzenia aplikacji internetowych z AngularJS book P. 19, napisano, że

Unikaj bezpośredniego powiązania z właściwościami scope. Dwukierunkowe powiązanie danych z właściwości obiektu (narażone na zakres) są preferowanym podejściem. Jako zasada kciuka, należy mieć kropkę w wyrażeniu dostarczonym do dyrektywa ng-model (np. ng-model="thing.name").

Zakresy są tylko obiektami JavaScript i naśladują hierarchię dom. Zgodnie z JavaScript Dziedziczenie prototypu , właściwości zakresów są rozdzielane przez zakresy. Aby tego uniknąć, notacja kropkowa powinna być używana do wiązania modeli ng.

Użycie this zamiast $scope działa.

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>

Edit: w czasie pisania tej odpowiedzi, miałem znacznie bardziej skomplikowaną sytuację niż ta. Po komentarzach próbowałem go odtworzyć, aby zrozumieć, dlaczego działa, ale bez powodzenia. Myślę, że w jakiś sposób (nie wiem dlaczego) generowany jest nowy zakres potomny i this odnosi się do tego zakresu. Ale jeśli $scope jest używane, to w rzeczywistości odnosi się do rodzica $scope ze względu na zakres leksykalny javascript cecha.

Byłoby świetnie, gdyby ktoś z tym problemem testował w ten sposób i nas informował.

Miałem ten sam problem i było to spowodowane tym, że nie zadeklarowałem pustego obiektu najpierw na górze kontrolera:

$scope.model = {}

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

Mam nadzieję, że to zadziała dla Ciebie!

Natknąłem się na ten sam problem, gdy miałem do czynienia z nietrywialnym widokiem(są zagnieżdżone zakresy). I wreszcie odkrył, że jest to znana trudna rzecz przy opracowywaniu aplikacji AngularJS ze względu na naturę dziedziczenia opartego na prototypach java-script. Za pomocą tego mechanizmu tworzone są zagnieżdżone lunety AngularJS. A wartość utworzona z ng-model jest umieszczana w zakresie potomnym, nie mówiąc, że zakres rodzica (może ten wtryskiwany do kontrolera) nie będzie widział wartości, wartość będzie również zaciemniać dowolny właściwość o tej samej nazwie zdefiniowana w zakresie nadrzędnym, jeśli nie używa kropki do wymuszenia dostępu do referencji prototypu. Aby uzyskać więcej szczegółów, sprawdź wideo online, aby zilustrować ten problem, http://egghead.io/video/angularjs-the-dot / i komentarze.

Spójrz na to skrzypce http://jsfiddle.net/ganarajpr/MSjqL/

Mam ( zakładam! ) zrobił dokładnie to, co robiłeś i wydaje się, że działa. Możesz sprawdzić, co nie działa tutaj dla Ciebie?

Dla mnie problem został rozwiązany poprzez umieszczenie moich danych w obiekcie (tutaj "dane").

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

});

I Hop it will help

Ponieważ nikt o tym nie wspomniał, problem można rozwiązać dodając $parent do właściwości

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

I kontroler

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

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

Miałem właśnie ten problem z użyciem root_controllera związanego z elementem ciała. Następnie używałem ng-view z routerem kątowym. Problem polega na tym, że angular zawsze tworzy nowy zakres, gdy wstawia html do elementu ng-view. W konsekwencji, moja funkcja "check" została zdefiniowana na nadrzędnym zakresie zakresu, który został zmodyfikowany przez mój element modelu ng.

Aby rozwiązać problem, wystarczy użyć dedykowanego kontrolera w treści html załadowanej trasą.

Możesz to zrobić, aby włączyć wyszukiwanie w ng-keypress Wprowadź tekst wejściowy i w ng-click ikonę:

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

Miałem ten sam problem.
Właściwym sposobem byłoby ustawienie' searchText ' jako właściwości wewnątrz obiektu.

Ale co, jeśli chcę zostawić to tak, jak jest, ciąg? próbowałem każdej wymienionej metody, nic nie działało.
Ale potem zauważyłem, że problem jest tylko w inicjacji, więc po prostu ustawić atrybut wartości i to działa.

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

W ten sposób wartość jest ustawiona na ' $ scope.wartość searchText i jest aktualizowana, gdy wartość wejściowa zmiany.

Miałem ten sam problem... Rozdzielczość, która zadziałała dla mnie, to użycie tego słowa kluczowego..........

Alert (this.ModelName);