#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.