基于Yeoman Angular Generator的自定义Bootstrap模板本地测试不生效问题

我来帮你捋捋这个问题——这种自定义Angular模板不生效的情况，我碰到过好几次，大概率是模板路径/缓存键名不匹配或者加载顺序/优先级的问题，咱们一步步排查：

Bootstrap UI的datepicker默认模板有固定的路径（比如不同版本可能是uib/template/datepicker/datepicker.html），你要替换它，必须保证ngtemplates生成的$templateCache键名和这个默认路径丝毫不差。

• 打开Grunt生成的模板缓存文件（一般是.tmp/templates.js或者类似命名），查看里面的$templateCache.put('xxx', ...)语句，确认xxx的路径和datepicker组件引用的模板路径完全一致。
• 如果你的自定义模板放在app/custom-templates/datepicker.html，那需要在ngtemplates配置里把路径转换成组件期望的键名，比如：

  ngtemplates: {
    app: {
      src: 'app/custom-templates/**/*.html',
      dest: '.tmp/templates.js',
      options: {
        url: function(url) {
          // 把自定义路径映射成Bootstrap默认的模板路径
          return 'uib/template/datepicker/' + url.split('/').pop();
        }
      }
    }
  }
  

就算缓存文件生成正确，如果它在Bootstrap UI脚本之后加载，组件已经先读取了默认模板，你的缓存就覆盖不了。

• 确保templates.js在angular-ui-bootstrap.js之前引入到index.html里。用injector的话，要在Grunt配置里指定注入位置在Bootstrap脚本区块的前面，而不是随便塞到页面底部。

本地测试时，浏览器很可能缓存了旧的templates.js或者index.html，导致你看不到更新：

• 试试强制刷新页面（Ctrl+Shift+R），或者打开开发者工具的「禁用缓存」选项再测试。
• 手动跑一遍grunt ngtemplates，确认缓存文件确实被重新生成了——有时候livereload可能没监听到模板文件的变化。

如果你尝试直接把模板塞进<script type="text/ng-template">标签：

• 要确保模板里的特殊字符（比如引号、换行、Angular表达式）被正确转义。Grunt的html任务如果没处理转义，可能会导致模板内容被截断，组件读不到完整的模板。
• 其实更推荐用ngtemplates生成$templateCache，它会自动处理转义和路径问题，比手动注入可靠得多。

有些版本的Angular UI Bootstrap允许通过全局配置指定模板路径，比如：

angular.module('yourApp')
  .config(function(uibDatepickerConfig) {
    uibDatepickerConfig.templateUrl = 'uib/template/datepicker/datepicker.html';
  });

如果你的缓存键名改了，这里也要同步修改，不然组件还是会找默认路径。

在浏览器控制台里运行下面的代码，看看$templateCache里存储的是不是你的自定义模板：

// 确保Angular已加载后执行
angular.element(document.body).injector().get('$templateCache').get('uib/template/datepicker/datepicker.html')

• 如果返回的是默认模板：说明你的缓存没正确覆盖，回到前面检查路径和加载顺序。
• 如果返回的是自定义模板：那可能是组件没正确引用这个模板，或者有其他配置冲突。

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