Javascript Datepicker在模式上不工作。Angular.js

我正在使用bootstrap daterangepicker.js库，在文本字段中使用“date”类生成日历。我在模态之外有一个文本字段，它可以完美地工作，但是模态中带有类“date”的文本字段不工作

为什么会发生这种情况？我能做什么

$('.date').daterangepicker({
        "singleDatePicker": true,
        "opens": "right",
})


<div ng-app="myApp">
 <input type='text' class='date'>

<script type="text/ng-template" id="myModal.html">
 <div class="modal-header">
  <h3 class="modal-title">Modal title</h3>
 </div>
 <div class="modal-body">
    not works daterangepicker this field!
    <input type='text' class='date' id='date'>
 </div>
 <div class="modal-footer">
  <button class="btn btn-primary" ng-click="close(true)">OK</button>
  <button class="btn btn-warning" ng-click="close('modalInstanceOne')">Cancel</button>
 </div>
</script>

<div ng-controller="MyCtrl">
 <input type="button" value="Show modal" ng-click="showModal()" />
</div>

$（'.date'）.daterangepicker({
“singleDatePicker”：正确，
“打开”：“正确”，
})
情态标题
daterangepicker在该字段不起作用！
好啊
取消

---

每当我将第三方小部件（UIbootstrap、jQueryUI等）与angular代码或模板混合使用时，我总是使用自定义指令。下面是一个使用您提供的代码的工作示例：

其思想是创建一个自定义指令，然后将其附加到您的输入元素——这样，每当通过结构角度指令或模板创建元素时，就会调用link函数，并实例化小部件。您遇到的问题是，在控制器中调用

.daterangepicker（）

之后，模态上的日期输入被放置在DOM中

指令+控制器 HTML

情态标题
daterangepicker在该字段不起作用！
好啊
取消

方法中的问题是，模式中没有控制器。如果您将模式代码更改为，请更改行

div class=“模态体”ng controller=“MyCtrl”

它起作用了

<script type="text/ng-template" id="myModal.html">
    <div class="modal-header">
      <h3 class="modal-title">Modal title</h3>
    </div>
    <div class="modal-body" ng-controller="MyCtrl"> ---- ng-controller
    not works daterangepicker this field!
        <input type='text' class='date' id='date'>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="close(true)">OK</button>
      <button class="btn btn-warning" ng-click="close('modalInstanceOne')">Cancel</button>
    </div>
  </script>

情态标题
----ng控制器
daterangepicker在该字段不起作用！
好啊
取消

我已经发布了一个答案-如果这是您想要的，请告诉我！

<div ng-app="myApp">
  <input type='text' class='date' daterangepicker>

  <script type="text/ng-template" id="myModal.html">
    <div class="modal-header">
      <h3 class="modal-title">Modal title</h3>
    </div>
    <div class="modal-body">
      not works daterangepicker this field!
      <input type='text' class='date' id='date' daterangepicker>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="close(true)">OK</button>
      <button class="btn btn-warning" ng-click="close('modalInstanceOne')">Cancel</button>
    </div>
  </script>

  <div ng-controller="MyCtrl">
    <input type="button" value="Show modal" ng-click="showModal()" />
  </div>
</div>

<script type="text/ng-template" id="myModal.html">
    <div class="modal-header">
      <h3 class="modal-title">Modal title</h3>
    </div>
    <div class="modal-body" ng-controller="MyCtrl"> ---- ng-controller
    not works daterangepicker this field!
        <input type='text' class='date' id='date'>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="close(true)">OK</button>
      <button class="btn btn-warning" ng-click="close('modalInstanceOne')">Cancel</button>
    </div>
  </script>