JQuery 日期时间选择器插件不适用于 ng-view 中的 AngularJS答案

【问题标题】：JQuery Datetime picker plugin does not work with AngularJS in ng-viewJQuery 日期时间选择器插件不适用于 ng-view 中的 AngularJS
【发布时间】：2014-02-04 10:32:54
【问题描述】：

我正在使用 datetime picker 和 angularjs。

我的 angularjs 代码如下所示。

<div id="bodyContainer">                
   <div ng-app="tb">           
      <div ng-view></div>
   </div>
</div>

我的观点是这样的。

<div class="control-group" ng-class="{error: myForm.bdatetime.$invalid}">
   <label class="control-label" for="bdatetime">Date Time</label>
   <div class="controls">
     <input type="text" ng-model="bdatetime" name="bdatetime" id="datetimepicker" required/>
     <span ng-show="myForm.bdatetime.$error.required" class="help-inline">Required</span>
   </div>
</div>

并且日期时间选择器不起作用，这可能是因为视图部分稍后通过 angularjs ajax 加载。脚本执行时输入控制器不存在。我该如何解决。

如果我将输入控制器移到 ng-app 之外，类似这样。它完美地工作。

<div id="bodyContainer">  
   <input type="text" id="datetimepicker" />              
   <div ng-app="tb">           
      <div ng-view></div>
   </div>
</div>

但这不是我想要的，我需要使用 angularjs 来完成这项工作。

【问题讨论】：

您可以在 Plunker/Fiddle 中发布您的代码吗？会有所帮助

标签： jquery angularjs

【解决方案1】：

日历问题可以使用

来解决

  $(document).on("focus","#datetimepicker", function() {                    
                $('#datetimepicker').datetimepicker({
                    format: 'd/m/Y H:i',
                });

            });

但数据绑定可能是另一个问题。

【讨论】：

这对我来说已经足够了。但我必须在保存或任何其他操作之前添加一行：$scope.date = $('#datepicker').val();

【解决方案2】：

将下面的代码移动到 AngularJS 控制器和日期时间选择器将与 angularjs 一起正常工作。

$('#datetimepicker').datetimepicker({
                        format: 'd-m-Y H:i',
                        onChangeDateTime:function(dp,$input){
                            $scope.bdatetime = $input.val();                                                        
                            $scope.$apply();
                        }
                    });

【讨论】：