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

我在roomInfo对象上有5个属性，4个属性返回值，但只有dateFrom返回最初定义的空字符串或空值

Answer 1

如果你在这个非Angular datepicker库上设置，那么理想的方法是创建你自己的angular指令（或找到一个）来环绕它。或者，快速的hacky方法是触发假的变化＆＃39;输入元素上的事件。

如果您沿着编写自定义指令的路线前进，那么您的指令将需要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-model时，第一个控制器触发一次$将更改应用于范围，然后触发另一个控制器，将$ scope初始化为我设置的原始值。

当我运行console.log（$ scope）时，我注意到了这个错误，它会自动记录两次，两个日志总是打印出初始设置值，而不是更改后的值;虽然element.value已经改变了。

输入有值但ngModel为空

3 个答案: