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 = {};
объект в контроллере и вуаля... Не знаю, почему это работает, хотя;]
13 ответов:
" Если вы используете ng-модель, вы должны иметь точку там."
Сделайте так, чтобы ваша модель указывала на объект.собственность и вы будете хорошо идти.контроллер
$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 book p. 19 написано, что
избегайте прямых привязок к свойствам области. Двусторонняя привязка данных к свойства объекта (представленные в области видимости) является предпочтительным подходом. Как правило, вы должны иметь точку в выражении, предоставляемых директива ng-model (например, ng-model="thing.name").
области-это просто объекты JavaScript, и они имитируют иерархию dom. Согласно Наследование Прототипов 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>
Edit: в то время, когда я писал этот ответ, у меня была гораздо более сложная ситуация, чем эта. После комментариев я попытался воспроизвести его, чтобы понять, почему он работает, но не повезло. Я думаю, что как-то (не знаю, почему) создается новая дочерняя область и
this
относится к этой области. Но если$scope
используется, это на самом деле относится к родительской $ scope из-за javascript лексической области характеристика.было бы здорово, если кто-то с этой проблемой проверяет этот путь и сообщить нам.
У меня была та же проблема, и это было связано с тем, что я не объявлял пустой объект сначала в верхней части моего контроллера:
$scope.model = {} <input ng-model="model.firstProperty">
надеюсь, что это будет работать для вас!
Я столкнулся с той же проблемой при работе с нетривиальным представлением (есть вложенные области). И, наконец, обнаружил, что это известная хитрость при разработке приложения AngularJS из-за природы прототипного наследования java-скрипта. Вложенные области AngularJS создаются с помощью этого механизма. И значение, созданное из ng-model, помещается в дочернюю область, не говоря о родительской области (возможно, введенной в контроллер), не будет видеть значение, значение также будет затенять любое свойство с тем же именем, определенным в родительской области, если не использовать точку для принудительного доступа к ссылке прототипа. Для получения более подробной информации, проверьте онлайн-видео, чтобы проиллюстрировать эту проблему,http://egghead.io/video/angularjs-the-dot/ и комментарии, следующие за ним.
взгляните на эту скрипку http://jsfiddle.net/ganarajpr/MSjqL/
У меня есть ( я предполагаю! ) сделал именно то, что вы делали, и это, кажется, работает. Можете ли вы проверить, что не работает здесь?
для меня проблема была решена путем хранения моих данных в объект (здесь "данные").
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' } });
Я надеюсь, что это поможет
Так как никто не упоминал об этом проблема может быть решена путем добавления
$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! }; }]);
У меня просто была эта самая проблема с использованием root_controller, привязанного к элементу body. Затем я использовал ng-view с угловым маршрутизатором. Проблема в том, что angular всегда создает новую область, когда он вставляет html в элемент ng-view. Как следствие, моя функция "проверка" была определена на родительской области области, которая была изменена моим элементом ng-model.
чтобы решить эту проблему, просто используйте выделенный контроллер в загруженном маршрутом html-содержимом.
вы можете сделать это, чтобы включить в поиск
ng-keypress
Enter для ввода текста и в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' как свойство внутри объекта.но что, если я хочу оставить все как есть, строки? ну, я попробовал каждый метод, упомянутый здесь, ничего не сработало.
Но потом я заметил, что проблема только в инициации, поэтому я просто установил атрибут value, и это сработало.<input type="text" ng-model="searchText" value={{searchText}} />
таким образом, значение просто устанавливается в '$scope.значение searchText ' и оно обновляется при изменении входного значения.
Я знаю, что это обходной путь, но это сработало для меня..