Question

我正在尝试在我的项目中使用带有angularJs的jQuery datetimepicker插件this。如果我在除了表之外的任何地方使用它，但是当我在表中使用'ng-repeat'时，它工作正常不行。

Html代码：

<div ng-controller= "thirdCtrl">
    <table style="border: 1px solid;">
        <tr>
            <td>Select Date</td>
        </tr>
        <tr ng-repeat="actor in AAA.cast>
            <td><input id="datetimepicker{{$index}}" type="text" ng-model="actor.date">
            <input class="btn-primary" type="submit" value="Cal" id="image_button{{$index}}" ng-click="cal($index)" /></td>
        </tr>
    </table>
</div>

Js代码：

function thirdCtrl($scope)
{
    var AAA = {};    
AAA.cast = [    { 'date' : '20-Dec-2014 7:00 pm'} , 
                { 'date' : '01-Dec-2014 7:00 pm'} , 
                { 'date' : '15-Dec-2014 7:00 pm'} , 
                { 'date' : '30-Dec-2014 7:00 pm'} , 
                { 'date' : '31-Dec-2014 7:00 pm'} , 
                { 'date' : '14-Dec-2014 7:00 pm'} , 
                { 'date' : '11-Dec-2014 7:00 pm'}
               ];

$scope.cal = function(index)
{
  var id = 'datetimepicker'+index;
  console.log('datetimepicker called '+ id);
  jQuery('#id').datetimepicker('show'); //support hide,show and destroy command
};

Date.parseDate = function( input, format ){
  return moment(input,format).toDate();
};
Date.prototype.dateFormat = function( format ){
  return moment(this).format(format);
};

for(var i=0; i< AAA.cast.length; i++)
{
    var temp  = 'datetimepicker'+i;
    console.log('temp '+temp);
  jQuery('#temp').datetimepicker({
  format:'DD-MMM-YYYY h:mm a',
  formatTime:'h:mm a',
  formatDate:'DD-MMM-YYYY'
});
}
};

当我调用此日历按钮时，正在调用'cal（）'方法，但未显示日历。我已经多次调试了这段代码，正确地初始化了所有值，并正确分配了id。 JS代码中没有错误，并且正在调用jQuery的datetimepicker()方法但不显示日历。

Answer 1

首先，你应该避免在Angular的控制器中使用jQuery，如果需要，jQuery的位置在指令中。

无论如何，在您的代码中，您的功能不起作用，因为您没有使用正确的ID，更新您的校准方法：

$scope.cal = function(index)
{
  var id = 'datetimepicker'+index;
  jQuery('#' + id).datetimepicker('show');
};

不从angularJs表调用jquery函数

1 个答案: