Ng-model tidak memperbarui nilai pengontrol

Mungkin pertanyaan konyol, tapi saya punya formulir html dengan input dan tombol sederhana:

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

Kemudian di controller (template dan controller dipanggil dari routeProvider):

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

Mengapa saya melihat tampilan diperbarui dengan benar tetapi tidak terdefinisi di konsol saat mengklik tombol?

Terima kasih!

Pembaruan: Sepertinya saya telah benar-benar menyelesaikan masalah itu (sebelum harus menemukan beberapa solusi) dengan: Hanya perlu mengubah nama properti saya dari searchTextmenjadi search.text, kemudian menetapkan $scope.search = {};objek kosong di controller dan voila ... Tidak tahu mengapa ini bekerja meskipun;]

Kontroler sebagai versi (disarankan)

Di sini templatnya

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

Sebuah contoh: http://codepen.io/Damax/pen/rjawoO

Yang terbaik adalah menggunakan komponen dengan Angular 2.x atau Angular 1.5 atau lebih tinggi

Cara lama (TIDAK disarankan)

Ini TIDAK direkomendasikan karena string adalah primitif, sangat disarankan untuk menggunakan objek

Coba ini di markup Anda

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

dan ini di controller Anda

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

"Jika kamu menggunakan ng-model, kamu harus memiliki titik di sana."
Buat model Anda menunjuk ke object.property dan Anda akan baik-baik saja.

Pengendali

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

Templat

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

Ini terjadi ketika cakupan anak sedang dimainkan - seperti rute anak atau ng-pengulangan. Lingkup anak membuat nilainya sendiri dan konflik nama lahir seperti diilustrasikan di sini :

Lihat klip video ini untuk lebih banyak: https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s

Dalam Menguasai Pengembangan Aplikasi Web dengan AngularJS buku hal.19, tertulis bahwa

Hindari ikatan langsung ke properti lingkup. Mengikat data dua arah ke properti objek (diekspos pada lingkup) adalah pendekatan yang lebih disukai. Sebagai aturan praktis, Anda harus memiliki titik dalam ekspresi yang disediakan untuk arahan model-ng (misalnya, ng-model = "thing.name").

Lingkup hanyalah objek JavaScript, dan mereka meniru hierarki dom. Menurut JavaScript Prototype Inheritance , properti lingkup dipisahkan melalui cakupan. Untuk menghindari hal ini, notasi titik harus digunakan untuk mengikat model-ng.

Menggunakan thisalih-alih $scopebekerja.

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>

Sunting: Pada saat menulis jawaban ini, saya memiliki situasi yang jauh lebih rumit daripada ini. Setelah komentar, saya mencoba mereproduksi untuk memahami mengapa itu berhasil, tetapi tidak berhasil. Saya pikir entah bagaimana (tidak benar-benar tahu mengapa) lingkup anak baru dihasilkan dan thismengacu pada lingkup itu. Tetapi jika $scopedigunakan, itu sebenarnya merujuk ke parent $ scope karena lingkup leksikal javascript fitur .

Akan lebih bagus jika seseorang yang memiliki masalah ini menguji cara ini dan memberi tahu kami.

Saya memiliki masalah yang sama dan itu karena saya tidak mendeklarasikan objek kosong terlebih dahulu di bagian atas controller saya:

$scope.model = {}

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

Semoga ini akan bekerja untuk Anda!

Saya menemukan masalah yang sama ketika berhadapan dengan pandangan non-sepele (ada ruang bersarang). Dan akhirnya ditemukan bahwa ini adalah hal yang sulit diketahui ketika mengembangkan aplikasi AngularJS karena sifat dasar prototipe dari java-script. Lingkup bersarang AngularJS dibuat melalui mekanisme ini. Dan nilai yang dibuat dari ng-model ditempatkan di lingkup anak-anak, tidak mengatakan lingkup orang tua (mungkin yang disuntikkan ke controller) tidak akan melihat nilai, nilainya juga akan membayangi properti apa pun dengan nama yang sama yang didefinisikan dalam lingkup orang tua jika tidak menggunakan titik untuk menegakkan akses referensi prototipe. Untuk detail lebih lanjut, checkout video online khusus untuk menggambarkan masalah ini, http://egghead.io/video/angularjs-the-dot/ dan komentar yang menindaklanjutinya.

Lihatlah biola ini http://jsfiddle.net/ganarajpr/MSjqL/

Saya (saya berasumsi!) Telah melakukan persis apa yang Anda lakukan dan tampaknya berhasil. Bisakah Anda memeriksa apa yang tidak berfungsi di sini untuk Anda?

Karena tidak ada yang menyebutkan ini, masalahnya dapat diselesaikan dengan menambahkan $parentke properti terikat

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

Dan pengontrolnya

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

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

Bagi saya masalahnya diselesaikan dengan menyimpan data saya menjadi sebuah objek (di sini "data").

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

});

Saya berharap ini akan membantu

Saya baru saja mengalami masalah ini menggunakan root_controller terikat ke elemen-tubuh. Kemudian saya menggunakan ng-view dengan router sudut. Masalahnya adalah SELALU sudut menciptakan ruang lingkup baru ketika menyisipkan html ke elemen ng-view. Sebagai konsekuensinya, fungsi "cek" saya didefinisikan pada lingkup induk dari lingkup yang dimodifikasi oleh elemen ng-model saya.

Untuk mengatasi masalah tersebut, gunakan saja pengontrol khusus di dalam konten html yang dimuat rute.

Anda dapat melakukannya untuk mengaktifkan pencarian di ng-keypressenter untuk input teks dan di ng-clickuntuk 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);
        }
    }

Saya memiliki masalah yang sama.
Cara yang tepat adalah mengatur 'searchText' menjadi properti di dalam objek.

Tetapi bagaimana jika saya ingin membiarkannya seperti itu, sebuah string? baik, saya mencoba setiap metode yang disebutkan di sini, tidak ada yang berhasil.
Tapi kemudian saya perhatikan bahwa masalahnya hanya di inisiasi, jadi saya baru saja menetapkan atribut nilai dan itu berhasil.

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

Dengan cara ini nilai hanya disetel ke nilai '$ scope.searchText' dan diperbarui ketika nilai input berubah.

Saya tahu ini solusinya, tapi itu berhasil untuk saya ..

Saya menghadapi masalah yang sama ... Resolusi yang berhasil bagi saya adalah menggunakan kata kunci ini ..........

lansiran (this.ModelName);