ввод имеет значение, но ngModel пуст

Question

я заполняю вход с выбором даты, отлично работает и заполняет дату ввода в, я могу получить значение входа, войдя в консоли тоже:

var elem = document.getElementById('dateFrom'); 
elem.value 
//returns 
2014/12/12 

но ngModel возвращает пустую строку, а проверка формы приводит к ошибке. как я могу это решить?

HTML

<form name="roomInfoForm" ng-submit="rooms($event, roomInfoForm.$valid)"> 
    // 4 inputs here 
    <input type="text" id="dateFrom" name="dateFrom" ng-model="roomInfo.dateFrom" required datepicker="#dateFrom"> 
</form> 

Контроллер

$scope.rooms = function (e, isValid) { 
    console.log(roomInfo, isValid); 
} 

У меня есть 5 свойств объекта roomInfo, 4 свойства возвращают значение, но только dateFrom возвращает первоначально определенную пустую строку или нулевое значение

Answer 1

Если вы настроены на эту неграмотную библиотеку датпикера, то идеальный подход будет ld создать собственную угловую директиву (или найти ее), чтобы обернуть ее. Или быстрый хакерский подход будет инициировать фальшивое событие «change» на элементе ввода.

Если вы идете по пути написания пользовательской директивы, тогда ваша директива должна будет соответствовать require: 'ngModel'. Это приведет к тому, что функции директивы link будет присвоен объект NgModelController в качестве его четвертого аргумента. Функция ссылки вашей директивы должна будет добавить необходимых слушателей, чтобы уловить события, вызванные изменением значения библиотеки выбора даты, и вызвать ngModel. $ SetViewValue, чтобы рассказать об изменениях.

.directive('datepicker', function() { 
    restrict : 'A', 
    require : 'ngModel', 
    link : function(scope, el, attrs, ngModel) { 
     //...    
     //I'm making some guesses here because I don't know what library you're using. 
     el.datepicker({ 
      onSelect : function(date) { 
       ngModel.$setViewValue(date); 
      } 
      //, ... 
     }); 
     //...  
    } 
}) 

https://egghead.io/lessons/angularjs-using-ngmodel-in-custom-directives https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Это может быть стоит проверить на ngmodules.org для существующей директивы оборачивать вокруг вашей предпочтительной библиотеки. http://ngmodules.org/modules?query=datepicker

Answer 2

Попробуйте напечатать значение ввода, как это:

<input type="text" ng-model="myModel">{{myModel}} 

for your code: 
<input type="text" id="dateFrom" name="dateFrom" ng-model="roomInfo.dateFrom" 
required datepicker="#dateFrom"> {{roomInfo.dateFrom}} 

Если то, что дата или значение, которое вы выбираете распечатывается. это означает, что область действия работает, тогда попытайтесь использовать $ timeout.

angular.module('app').controller('myCtrl',function($scope,$timeout){ 
$scope.rooms = function (e, isValid) { 
    $timeout(function(){ 
    console.log(roomInfo, isValid) 
    }); 
}; 
}); 

если ваше входное значение не выводится на печать, ваша сфера даже не связана (я думаю, что это так, так как ваша форма является недействительным) ... Если область даже не связаны между собой, то проблема в другом месте, которая здесь не показана. надеюсь, это поможет

Answer 3

На самом деле, если вы сказали, что ваша $ scope всегда возвращает первое инициализированное значение. У меня был этот опыт. это была очень глупая ошибка, поэтому я вроде бы не хотел упоминать об этом. Во всяком случае, что случилось, я дважды подключил контроллер. один в $ routeProvider и еще один в DOM, в качестве атрибутов html.


поэтому всякий раз, когда ng-модель изменена, первый контроллер загорается один раз до $, применяя изменение к области видимости, а затем запускается другой контроллер, который инициализировал $ scope исходному значению, которое я установил.

Я заметил эту ошибку, когда я запускаю console.log ($ scope), он автоматически регистрируется дважды, оба журнала всегда распечатывают начальное заданное значение, а не измененное значение; хотя значение element.value уже изменилось.