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

我发现你的方法存在两个问题：

如果使用相同的命名空间，则使用库的多个版本将不起作用。因此，如果日期选择器与最新的ui-boostrap版本配合使用，请检查。或者将代码降级到datepicker所需的ui-bootstrap版本。
我可能错了，但angular.module（＆＃39; actinbox.web＆＃39;）。控制器（＆＃39; DateTimepicker _ {{field.id_for_label}}＆＃39;将在b之后执行angular bootstrap。由于angular默认情况下不支持模块的延迟加载。我认为这不会起作用。尝试通过向控制器添加console.log输出来测试它，看它是否有效。

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

1 个答案: