ng-repeat 内的 Jquery 时间选择器不起作用

Question

当我正在进行我的项目时。在某些地方，我需要重复一些包含两次 html5 字段的输入字段。当我在 Chrome 中测试时一切都很顺利，但是当我在 Firefox 中测试时它显示为文本字段。 (Firefox 不支持时间和日期 html5 字段)。所以我开始寻找一些插件，但没有一个能满足我的要求。

So I have already wasted lot of time so I am explaining my requirements very clearly.

HTML 代码。

<div class="row" ng-repeat="timingindex in timingsArray">
    <div class="col-md-3">
      <select class="form-control" ng-model="timings[$index].group">
        <option value="Pre-Priary">Pre-Priary</option>
        <option  value="Primary">Primary</option>
        <option  value="Middle">Middle</option>
        <option  value="Senior">Senior</option>
      </select> 
    </div>
    <div class="col-md-2">
      <select class="form-control" ng-model="timings[$index].season">
        <option value="summer">Summer</option>
        <option value="winter">winter</option>
      </select> 
    </div>
    <div class="col-md-3">
      Starts: <input type="time" ng-model="timings[$index].starttime"> 
    </div>
    <div class="col-md-3">   

      Finish : <input type="time" ng-model="timings[$index].endtime">

    </div>
    <div class="col-md-1">
      <button ng-click="addNewTimings(timings[$index])">Save and Add More</button>
    </div>
    <div class="col-md-1">
      <button ng-show="$last" ng-click="removeTimigns($index)">Remove</button>
    </div>
  </div>

现在我想用这个jquery UI Plugin这对我来说没问题，因为我使用 jquery UI 的默认日期选择器来代替我的 html5 默认时间字段。

How i am trying to workaround using this plugin with my angular project is. ?

• 我必须为我需要的每个选择器添加这个 jquery。

  $('#slider_example_1').timepicker({ 时间格式:'hh:mm TT'});

• 我正在考虑提供唯一的名称，例如 id="slider_starttine_{{$index}}"以及类似的结束时间(检查我的 html 代码以清楚地了解我所说的 Angular )

• 每当添加新项目时，我都会使用 $index 添加两行 jquery。

  But problem is that this strategy is not working.

欢迎任何帮助。提前致谢。如果您需要更多说明，请在下面发表评论。我不确定我到底应该在这里写什么。

Answer 1

这是因为在元素内容呈现在 html 上之前，您正在对元素上的 timepicker 运行 jQuery 代码

更好的是，您应该将 jQuery 插件代码包装在指令中，并将绑定(bind) timepicker 写入指令链接函数内的该元素。从指令绑定(bind) jQuery 插件被认为是最佳实践。

标记

<input type="time" timepicker ng-model="timings[$index].starttime"> 

指令

app.directive('timepicker', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            //binding timepicker from here would be ensure that
            //element would be available only here.
            element.timepicker(); //your code would be here.
        }
    }
});

就像 this SO answer 中所做的那样