jqueryUI datepicker not showing within ng-if directive of angularjs

Question

I have a sample here where date picker is defined as

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

which is not fires the datepicker if that field is put inside ng-if directive.

Answer 1

Initially, when controller executes, the element id="date2" is not in dom. So event does not get attached. Use ng-show/ng-hide instead.

If you want to use ngIf, use it with directive(See Demo). Every time link get executed as ngIf evalutes to true and hence, your event get attach to it.

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;
          });
        }
      });
    }
  };
});

Answer 2

Use ng-show insted of ng-if directive, Since ng-if recreate the DOM and ng-show show/hide the DOM.