日期時間選擇器和模態衝突角度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輸出到控制器來測試它，看看它是否有效