Question

我使用bootstrap daterangepicker.js库，在文本字段中使用＆＃34; date＆＃34;生成日历。类。我在模态之外有一个文本字段，它完美地工作，但文本字段与类＆＃34;日期＆＃34;在模态中不起作用。

为什么会发生这种情况，我该怎么办？

$('.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>

http://fiddle.jshell.net/8qbxtnaf/

Answer 1

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

<强> Working DEMO

我们的想法是创建一个自定义指令，然后将它附加到您的输入元素 - 这样，只要通过结构角度指令或模板创建元素，就会调用链接函数，并且实例化窗口小部件。您遇到的问题是，在您的控制器中调用.daterangepicker() 之后，模式上的日期输入被放置在DOM 中。

指令+控制器

angular.module("myApp", ['ui.bootstrap']) .directive("daterangepicker", function (){ return { restrict: "A", link: function (scope, element, attrs, ngModelCtrl) { $(element).daterangepicker({ "singleDatePicker": true, "opens": "right", }); } } }) .controller("MyCtrl", function($scope, $modal) { // controller code here... });

HTML

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

Answer 2

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

div class =＆＃34; modal-body＆＃34; NG-控制器=＆＃34; MyCtrl＆＃34;

它有效。

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

Datepicker不适用于模态。 Angular.js

2 个答案:

指令+控制器

HTML