jQuery DateTime Picker插件在NG-View中与AngularJS无法使用

Question

我正在使用带有AngularJS的DateTime Picker。

我的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>

和DateTime Picker不起作用，这可能是因为视图零件以后通过AngularJS Ajax加载。脚本执行时不存在输入控制器。我该如何修复。

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

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

但这不是我想要的，我需要用AngularJS进行这项工作。

Answer 1

可以使用

来解决更高的问题

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

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

Answer 2

在代码下方移动到AngularJS控制器，DateTime Picker可以与AngularJS一起使用。

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