jQuery Datepicker在嵌入HTML文件中失效问题求助

你的问题出在DOM元素的加载时机上。

当你在$(document).ready()里初始化datepicker时，Angular的ng-include还没完成异步加载martyhtml.html的内容——也就是说，这时候页面上根本没有id="datepicker"的输入框，$("#datepicker").datepicker()相当于对一个空对象执行操作，自然不会生效。

而直接在index.html里写的输入框，在document.ready触发时已经存在于DOM中，所以初始化能成功。

这里有几种靠谱的解决方式，按推荐程度排序：

1. 自定义Angular指令（最符合Angular设计思路） #

把jQuery UI的datepicker封装成Angular指令，这样只要指令所在的元素被渲染到DOM，就会自动初始化datepicker，完美适配动态加载的内容：

angular.module('yourAppName').directive('datepicker', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      // 当指令绑定的元素就绪时，初始化datepicker
      $(element).datepicker();
    }
  };
});

然后在martyhtml.html里把输入框改成：

<p>Date: <input type="text" datepicker></p>

（不需要再写id了，指令会自动处理每个绑定的元素）

2. 监听ng-include的加载完成事件 #

在控制器里监听$includeContentLoaded事件，当ng-include加载完内容后再初始化datepicker：

$scope.martyfun = function(inp) {
  $scope.marty = 'htmls/martyhtml.html';
};

// 监听ng-include加载完成事件
$scope.$on('$includeContentLoaded', function(event, templateName) {
  // 确认是我们加载的模板
  if (templateName === 'htmls/martyhtml.html') {
    $("#datepicker").datepicker();
  }
});

注意：如果有多个ng-include，最好通过模板名称过滤，避免不必要的初始化。

3. 手动触发初始化（简单但不够优雅） #

如果你不想改太多代码，也可以在设置$scope.marty之后，用$timeout延迟执行初始化（确保DOM已经渲染完成）：

$scope.martyfun = function(inp) {
  $scope.marty = 'htmls/martyhtml.html';
  $timeout(function() {
    $("#datepicker").datepicker();
  });
};

这种方式依赖Angular的$timeout服务，需要在控制器里注入$timeout。

• 尽量避免在Angular代码里直接操作DOM（比如用jQuery选择器），自定义指令是更符合Angular生态的做法。
• 如果多个地方用到datepicker，指令还能统一配置（比如默认日期格式），复用性更强。

内容的提问来源于stack exchange，提问作者user4923462