日期时间选择器和模态冲突角度UI引导

Question

我有一个问题，在一个形式，我有我使用本教程modal创建一个角弹出形式，效果不错但是我的另一个领域是日期时间选择了影响。

这是我的代码，我使用模式：

<script src="{% static "ui-bootstrap-tpls-0.13.3.js" %}"></script> 

<script type="text/javascript" charset="utf-8"> 
    angular.module('actinbox.web').controller('ModalDemoCtrl', function ($scope, $modal) { 

     $scope.delivery={ 
     linktext: "{{form.delivery.value}}", 
     hyperlink: "{{form.delivery.value}}" 
      }; 

     $scope.animationsEnabled = true; 

     $scope.open = function() { 

     var modalInstance = $modal.open({ 
      animation: $scope.animationsEnabled, 
      templateUrl: 'taskDelivery', 
      controller: 'ModalInstanceCtrl', 
      size: 'sm', 
      resolve: { 
      linktext: function() { 
       return $scope.linktext; 
      },hyperlink: function() { 
       return $scope.hyperlink; 
      } 
      } 
     }); 

     modalInstance.result.then(function (delivery) { 
      $scope.delivery= { 
      linktext: delivery.linktext, 
      hyperlink: delivery.hyperlink 
      }; 

     }); 
     }; 

     $scope.toggleAnimation = function() { 
     $scope.animationsEnabled = !$scope.animationsEnabled; 
     }; 

    }); 


    angular.module('actinbox.web').controller('ModalInstanceCtrl', function ($scope, $modalInstance) { 

     $scope.delivery = { 
     linktext: "{{form.delivery.value}}", 
     hyperlink: "{{form.delivery.value}}" 
     }; 

     $scope.ok = function() { 
      $modalInstance.close({ 
      linktext:$scope.delivery.linktext, 
      hyperlink:$scope.delivery.hyperlink 
      }); 
     }; 

     $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
     }; 
    }); 
</script> 


<script type="text/ng-template" id="taskDelivery"> 
    <div class="modal-header"> 
     <h3 class="modal-title">Insert Link Here</h3> 
    </div> 
    <div class="modal-body"> 
     Link Text: <input type="text" ng-model="delivery.linktext"> <br> 
     Hyper Link: <input type="text" ng-model="delivery.hyperlink"> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn-cancel" type="button" ng-click="ok()">OK</button> 
     <button class="btn-save" type="button" ng-click="cancel()">Cancel</button> 
    </div> 
</script> 


<div ng-controller="ModalDemoCtrl"> 
    <div class="profileform"> 
     <div class="profile-detail"> 
      <label for="{{ field.id_for_label }}">{{ field.label_tag }}</label> 
       <div class="errormessage"> 
        {% if field.errors %} 
        {{ field.errors }}<i class="fa fa-exclamation-circle"></i> 
        {% endif %} 
       </div> 
       <input type="text" value="{$ delivery.linktext $}" name="{{field.name}}" style="width:100px;" disabled> 

       <input type="hidden" value="{$ delivery.linktext $}" name="{{field.name}}" style="width:100px;"> 
       <input type="text" value="{$ delivery.hyperlink $}" name="linknathis" style="width:200px;" disabled> 
       <button type="button" ng-click="open()">Set Delivery</button> 
     </div> 

    </div> 
</div> 

这已经是工作..但我的DateTimePicker不工作，但它确实如果我删除<script src="{% static "ui-bootstrap-tpls-0.13.3.js" %}"></script>

这是我的DateTimePicker脚本：

<script type="text/javascript" charset="utf-8"> 
    angular.module('actinbox.web').controller('DateTimepicker_{{ field.id_for_label }}', function($scope) { 
      // Set Javascript's Date Object value 
      $scope.selectedDateTime = new Date('{{field.value|date:"Y/m/d H:i:s"}}'); 
    }); 
</script> 

<div class="profileform" ng-controller="DateTimepicker_{{ field.id_for_label }}"> 
    <div class="profile-detail"> 
    <div class="errormessage" style="margin-top:-10px;"> 
     {% if field.errors %} 
     {{ field.errors }}<i class="fa fa-exclamation-circle"></i> 
     {% endif %} 
    </div> 
     <label for="{{ field.id_for_label }}">{{ field.label_tag }}</label> 

     <!--Hidden field for transfer date & time--> 
     <input type ="hidden" 
      id="{{field.id_for_label}}" 
      name="{{field.html_name}}" 
      value="{$selectedDateTime|date:'yyyy-MM-dd HH:mm:ss'$}"> 
     <!--Field for select date--> 
     <input style="width: 100px; padding-left: 5px;" 
      type="text" 
      ng-model="selectedDateTime" 
      data-date-format="yyyy-MM-dd" 
      data-autoclose="1" 
      bs-datepicker> 
     <!--Field for select time--> 
     <input style="width: 100px; padding-left: 5px;" 
      type="text" 
      ng-model="selectedDateTime" 
      data-time-format="HH:mm" 
      data-autoclose="1" 
      data-length="1" 
      bs-timepicker> 
    </div> 
</div> 

你觉得我有在这里的冲突？

<link rel="stylesheet" href="{% static "font-awesome-4.5.0/css/font-awesome.min.css" %}"> 
<link rel="stylesheet" href="{% static "bootstrap-3.3.5-dist/css/bootstrap.min.css" %}"> 
<link rel="stylesheet" href="{% static "bootstrap-additions-0.3.1/bootstrap-additions.min.css" %}"> 
<script src="{% static "angularjs-1.4.3/angular.min.js" %}"></script> 
<script src="{% static "angularjs-1.4.3/angular-animate.min.js" %}"></script> 
<script src="{% static "angularjs-1.4.3/angular-sanitize.min.js" %}"></script> 
<script src="{% static "angular-strap-2.3.1-dist/angular-strap.js" %}"></script> 
<script src="{% static "angular-strap-2.3.1-dist/angular-strap.tpl.js" %}"></script> 
<script src="{% static "ui-bootstrap-custom-tpls-0.13.3.js" %}"></script> 

<script src="{% static "ui-bootstrap-tpls-0.13.3.js" %}"></script> 

Answer 1

我看到2个问题，你的方法：

1. 使用库的多个版本，如果使用相同的命名空间，这是情况下将无法正常工作。所以要么检查，如果日期选择器适用于最新的ui-boostrap版本。或者将您的代码降级到datepicker所需的ui-bootstrap版本。

2. 我可能是错的，但angular.module（'actinbox.web'）。controller（'DateTimepicker _ {{field.id_for_label}}'将在角度引导后执行，因为角度，默认情况下不支持我不认为这会工作，试着通过添加一个console.log输出到控制器来测试它，看看它是否有效