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 = {};об’єкт у контролері та вуаля ... Не маю поняття, чому це працює хоч;]

Контролер як версія (рекомендується)

Ось шаблон

<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

Найкраще буде використовувати компонент з кутовим 2.x або кутовим 1.5 або верхнім

Старий спосіб (НЕ рекомендується)

Це НЕ рекомендується, оскільки рядок є примітивним, настійно рекомендується замість цього використовувати об'єкт

Спробуйте це у своїй розмітці

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

і це у вашому контролері

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

"Якщо ви використовуєте ng-модель, ви повинні мати крапку там."
Зробіть свою модель вказівкою на 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-повтори. Дочірнє поле створює власну цінність і народжується конфлікт імен, як показано тут : Більше

див. У цьому відеокліпі: https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s

У Освоєнні розробки веб-додатків з книгою AngularJS с.19 написано, що

Уникайте прямих прив’язок до властивостей області. Двосторонній зв'язок даних щодо властивостей об'єкта (викритий на області дії) є кращим підходом. Як правило, ви повинні мати крапку у виразі, наданому директиві ng-model (наприклад, ng-model = "thing.name").

Області застосування - це лише об’єкти JavaScript, і вони імітують ієрархію дому. Відповідно до наслідування прототипу JavaScript , властивості областей розділяються через області застосування. Щоб уникнути цього, позначення крапок слід використовувати для прив’язки 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.model = {}

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

Сподіваємось, це допоможе вам!

Я зіткнувся з тим же питанням, коли розглядав нетривіальний погляд (є вкладені сфери застосування). І нарешті виявив, що це відома хитра річ при розробці програми AngularJS завдяки природі успадкування Java-скрипту на основі прототипу. За допомогою цього механізму створюються вкладені сфери AngularJS. І значення, створене з ng-моделі, розміщується в області дітей, не кажучи, що батьківська область (можливо, та, яка введена в контролер), не побачить значення, значення також затінить будь-яке властивість з тим самим іменем, визначеним у батьківській області, якщо не використовувати крапку для забезпечення доступу до прототипу по прототипу. Щоб отримати докладніші відомості, перегляньте онлайн-відео, яке конкретно проілюструє цю проблему, 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'
   }
   

});

Сподіваюся, це допоможе

У мене саме ця проблема була за допомогою root_controller, прив'язаного до елемента body. Тоді я використовував ng-view з кутовим маршрутизатором. Проблема полягає в тому, що кутова ЗАВЖДИ створює нову область, коли вона вставляє html в елемент ng-view. Як наслідок, моя функція "перевірка" була визначена в батьківській області області, яка була змінена моїм елементом 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}} />

Таким чином, значення просто встановлюється на значення "$ range.searchText" і оновляється, коли значення введення змінюється.

Я знаю, що це рішення, але це спрацювало для мене ..

Я зіткнувся з тією ж проблемою ... Резолюція, яка працювала для мене, - це використовувати це ключове слово ..........

попередження (це. МодельName);