jqueryUI datepicker未在angularjs的ng-if指令中显示

Question

我有一个样本here，其中日期选择器定义为

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

如果该字段放在ng-if指令中，则不会触发datepicker。

Answer 1

最初，当控制器执行时，元素id="date2"不在dom中。所以事件没有附加。请改用ng-show/ng-hide。

如果要使用ngIf，请将其与指令一起使用（请参阅Demo）。每次链接执行时，ngIf evalutes为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;
          });
        }
      });
    }
  };
});

Answer 2

使用 ng-show 加入 ng-if 指令，因为ng-if重新创建DOM，ng-show显示/隐藏DOM。