Model Ng nie aktualizuje wartości kontrolera

Prawdopodobnie głupie pytanie, ale mam formularz HTML z prostym wejściem i przyciskiem:

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

Następnie w kontrolerze (szablon i kontroler są wywoływane z routeProvider):

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

Dlaczego po kliknięciu przycisku widok jest poprawnie aktualizowany, ale niezdefiniowany w konsoli?

Dzięki!

Aktualizacja: Wydaje się, że faktycznie rozwiązałem ten problem (wcześniej musiałem wymyślić kilka obejść) z: Musiałem tylko zmienić nazwę mojej właściwości z searchTextna search.text, a następnie zdefiniować pusty $scope.search = {};obiekt w kontrolerze i voila ... Nie mam pojęcia, dlaczego to działa chociaż ;]

Kontroler jako wersja (zalecane)

Tutaj szablon

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

Przykład: http://codepen.io/Damax/pen/rjawoO

Najlepiej będzie użyć komponentu z Angular 2.x lub Angular 1.5 lub wyższym

Stary sposób (niezalecany)

NIE jest to zalecane, ponieważ ciąg znaków jest prymitywnym, wysoce zalecane jest użycie zamiast niego obiektu

Spróbuj tego w swoim znaczniku

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

i to w twoim kontrolerze

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

„Jeśli używasz modelu ng, musisz mieć tam kropkę”.
Wskaż swój model na object.property, a będziesz gotowy.

Kontroler

$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 w zasięgu znajdują się zakresy potomne - takie jak trasy potomne lub powtórzenia ng. Zasięg potomny tworzy własną wartość i rodzi się konflikt nazw, jak pokazano tutaj :

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

W Mastering Development Application Development with AngularJS, s.19, jest napisane, że

Unikaj bezpośrednich powiązań z właściwościami zakresu. Preferowanym podejściem jest dwukierunkowe wiązanie danych z właściwościami obiektu (eksponowanymi w zakresie). Zasadniczo powinieneś mieć kropkę w wyrażeniu podanym w dyrektywie ng-model (na przykład ng-model = "thing.name").

Zakresy są tylko obiektami JavaScript i naśladują hierarchię domen. Zgodnie z JavaScript Prototype Inheritance właściwości zakresów są rozdzielane przez zakresy. Aby tego uniknąć, do łączenia modeli ng należy używać notacji kropkowej .

Używanie thiszamiast $scopeprac.

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>

Edycja: W momencie pisania tej odpowiedzi miałem znacznie bardziej skomplikowaną sytuację niż ta. Po komentarzach próbowałem go odtworzyć, aby zrozumieć, dlaczego to działa, ale bez powodzenia. Myślę, że jakoś (naprawdę nie wiem dlaczego) generowany jest nowy zakres potomny i thisodnosi się do tego zakresu. Ale jeśli $scopezostanie użyty, to tak naprawdę odnosi się do nadrzędnego zakresu $ z powodu javascript funkcję zakresu leksykalnego .

Byłoby wspaniale, gdyby ktoś mający ten problem przetestował w ten sposób i poinformował nas.

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

$scope.model = {}

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

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

Ten sam problem natrafiłem na nietradycyjny widok (istnieją zakresy zagnieżdżone). I w końcu odkryłem, że jest to znana trudna rzecz podczas tworzenia aplikacji AngularJS ze względu na charakter prototypowego dziedziczenia skryptu Java. Za pomocą tego mechanizmu tworzone są zagnieżdżone zakresy AngularJS. A wartość utworzona z modelu ng jest umieszczana w zakresie potomnym, nie mówiąc o tym, że zakres macierzysty (być może ten wstrzyknięty do kontrolera) nie zobaczy wartości, wartość spowoduje również cień każdej właściwości o tej samej nazwie zdefiniowanej w zakresie macierzystym, jeśli nie zostanie użyta kropka w celu wymuszenia dostępu do referencyjnego prototypu. Aby uzyskać więcej informacji, zapoznaj się z konkretnym filmem online ilustrującym ten problem, http://egghead.io/video/angularjs-the-dot/ i komentarzami po nim.

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

Mam (zakładam!) Dokładnie to, co robiłeś i wydaje się, że działa. Czy możesz sprawdzić, co tu nie działa?

Ponieważ nikt o tym nie wspominał, problemu można rozwiązać, dodając $parentdo powiązanej 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!
    };
}]);

Dla mnie problem został rozwiązany przez gromadzenie 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'
   }
   

});

Mam nadzieję, że to pomoże

Właśnie miałem ten problem przy użyciu root_controller powiązanego z elementem body. Następnie korzystałem z widoku ng z routerem kątowym. Problem polega na tym, że kątowe ZAWSZE tworzy nowy zakres, gdy wstawia HTML do elementu ng-view. W konsekwencji moja funkcja „sprawdź” została zdefiniowana w zakresie nadrzędnym zakresu, który został zmodyfikowany przez mój element modelu ng.

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

Możesz to zrobić, aby włączyć wyszukiwanie w ng-keypressEnter dla tekstu wejściowego i ng-clickdla ikony:

<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” na właściwość wewnątrz obiektu.

Ale co jeśli chcę zostawić taki, jaki jest, ciąg? cóż, próbowałem każdej wspomnianej tutaj metody, nic nie działało.
Ale potem zauważyłem, że problem dotyczy tylko inicjacji, więc właśnie ustawiłem atrybut wartości i zadziałało.

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

W ten sposób wartość jest ustawiona na wartość „$ scope.searchText” i jest aktualizowana, gdy zmienia się wartość wejściowa.

Wiem, że to obejście, ale zadziałało dla mnie ..

Miałem ten sam problem ... Rozwiązaniem, które działało dla mnie, było użycie tego słowa kluczowego ...

alert (this.ModelName);