Представитель Angularjs + jquery bootstrap-datepicker не запускается при первом нажатии - PullRequest
Новая
       14

Представитель Angularjs + jquery bootstrap-datepicker не запускается при первом нажатии

0 голосов
/ 01 июля 2018

Я попытался динамически добавить указатель даты при нажатии кнопки, и я делегировал щелчок по указателю даты, который не работает при первом щелчке, а при втором щелчке запускается код, который я пробовал: 

$scope.add = function()
    {
      var body =angular.element(window.document.body);
      body.append(`
        <div class="input-group date">
          <input class="form-control input-sm" 
                 placeholder="dd/mm/yyyy"type="text">
          <span class="input-group-addon">
            <span class="fa fa-calendar"></span>
          </span>
        </div>
      `);

    }

$(document).delegate("div.input-group.date", "click", function(){     
      $(this).datepicker({autoclose: true,orientation:"top"});       
});

Я не смог выяснить причину, заранее спасибо. 

<html ng-app="app">
  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script src="jquery-1.11.3.js"></script>
    <!-- Datepicker for Bootstrap v1.5.0 (https://github.com/eternicode/bootstrap-datepicker) -->
    <script src="datetimepicker.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="test">
      <input ng-click="add()" value="Add datepicker" type="button" />
  </body>

</html>

Пример PLNKR

шагов по копированию ошибки:

  1. Нажмите Add Datepicker кнопка
  2. Компонент выбора даты будет добавлен в DOM, затем нажмите на кнопку выбора даты

Наблюдаемые

Первый клик не сработает, он будет работать с последующих кликов

Ответы [ 2 ]

0 голосов
/ 02 июля 2018

Наконец-то я нашел причину и обошел ту же. Я даю это решение, так как оно может помочь другим в будущем

Причина:

Первая ошибка - я связал событие datepicker с щелчком элемента, поэтому привязка произошла при первом щелчке, и она начала работать при последующих щелчках.

Работа вокруг

Мы должны связать указатель даты сразу после создания элемента. Я решил это, используя следующий код 

$scope.add = function()
    {
      var body =angular.element(window.document.body);
      var element=angular.element('<div class="input-group date">\
                      <input class="form-control input-sm"\
                      placeholder="dd/mm/yyyy" type="text">\
                      <span class="input-group-addon">\
                        <span class="fa fa-calendar"></span>\
                      </span>\
                  </div>');
      body.append(element);
      $(element).datepicker({autoclose: true,orientation:"top"});

    }
0 голосов
/ 01 июля 2018

Если вы просто пытаетесь сделать так, чтобы средство выбора даты появлялось при нажатии, сделайте это с помощью AngularJS:

Контроллер: 

$scope.add = function() {
  $scope.showDatePicker = true;
}

Шаблон: 

<button ng-click="add()">Add Datepicker</button>

<div ng-show="showDatePicker" class="input-group date">
   <input class="form-control input-sm" placeholder="dd/mm/yyyy"type="text">
   <span class="input-group-addon">
   <span class="fa fa-calendar"></span>
   </span>
</div>

Когда вы нажимаете кнопку с add(), $scope.showDatePicker устанавливается в значение true, и отображается указатель даты. Вы также можете добавить кнопку, чтобы «скрыть» указатель даты: 

$scope.remove = function() {
  $scope.showDatePicker = false;
}

Или вы можете создать функцию, которая переключает ее, где add и remove происходят в одной и той же функции.

...