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

【问题标题】：jqueryUI datepicker not showing within ng-if directive of angularjsjqueryUI datepicker 未在 angularjs 的 ng-if 指令中显示
【发布时间】：2016-10-21 07:38:03
【问题描述】：

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

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

如果将该字段放在ng-if 指令中，则不会触发日期选择器。

【问题讨论】：

正确的方法是使用指令。

标签： angularjs datepicker jquery-ui-datepicker

【解决方案1】：

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

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

【讨论】：

ng-show 有效。但我自己有复杂的 DOM 结构。所以尝试根据一些条件表达式动态创建DOM。
如果使用ng-showjsfiddle.net/mpsbhat/qx9sxo8w/8会发生这种情况

【解决方案2】：

使用 ng-show insted of ng-if 指令，因为 ng-if 重新创建 DOM 并且 ng-show 显示/隐藏 DOM。

【讨论】：