jQueryUI datepicker не отображается в директиве ng-if angularjs

#angularjs #datepicker #jquery-ui-datepicker

#angularjs #datepicker #jquery-ui-datepicker

Вопрос:

Здесь у меня есть пример, в котором средство выбора даты определяется как

 <div ng-if="show_d">
    <input id="date2" type="text" ng-model="date2">
  </div>
  

которая не запускает datepicker, если это поле помещено внутри ng-if директивы.

Комментарии:

1. Правильный способ — использовать директиву.

Ответ №1:

Изначально, при выполнении контроллера, элемент id="date2" отсутствует dom . Таким образом, событие не привязывается. Используйте ng-show/ng-hide вместо этого.

Если вы хотите использовать ngIf, используйте его с директивой (см. демонстрацию). Каждый раз, когда ссылка выполняется, поскольку ngIf присваивает значение true, и, следовательно, ваше событие привязывается к нему.

 angular.module('myApp').directive('datePicker', function() {
  return {
    scope: {
      date: '='
    },
    link: function(scope, element, attr) {
      jQuery(element[0]).datepicker({
        dateFormat: 'dd/mm/yy',
        defaultDate: new Date(),
        maxDate: '0',
        onSelect: function(date) {
          scope.$apply(function() {
            scope.date = date;
          });
        }
      });
    }
  };
});
  

Комментарии:

1. ng-show работает. Но у меня сложная структура DOM. Итак, пытаюсь динамически создать DOM на основе некоторых условных выражений.

2.Нечто подобное происходит при использовании ng-show jsfiddle.net/mpsbhat/qx9sxo8w/8

Ответ №2:

Используйте ng-show вместо директивы ng-if, поскольку ng-if воссоздает DOM, а ng-show показывает / скрывает DOM.