奇怪的angular-ui日期选择器依赖错误

Question

刚刚重新安装了一些Bower组件，但是这里的组件没有更新，仍然是相同的0.12.0 ui.bootstrap。另外使用ui-router 0.2.13将状态更改到另一个页面。

奇怪的错误信息是

Error: [$ compile: ctreq] Controller 'datepicker'（日期选择器），由指令'daypicker' (日期选择器)所需，无法找到！

但是当我查看ui-bootstrap-tpls.js文件时，datepicker控制器直接定义在daypicker上面，应该被捕获。

这可能是由冲突的datepicker类名或其他原因引起的吗？

我知道这不足以说明问题，但随着我有时间添加代码，我会进行更新。似乎可能在某个地方存在冲突的datepicker。它只发生在从一个页面到另一个页面的stateChange上。完整的使用日期选择器的流程在最后一页之前都没有问题。如果在同一文件中，如何漏掉控制器依赖项？

万一有人之前见过这种情况，我将不胜感激地接受任何帮助。

更新于2023年4月23日：使用模态对话框和表单，点击“确定”后会将用户发送到另一页。

- notbrain

---

@RoyLing 不是的，我找到了一个解决方法，避免使用相同的控制器来避免错误。我的另一个猜测是可能与angular-ui还不完全兼容angular 1.3.x有关。除此之外，我已经没有更多的想法了。我尝试在fiddle/plunker中复制，但无法重现。 - notbrain

在模态弹出窗口中使用日期选择器时遇到了问题。解决方法是在日期选择器的父元素上使用ng-if，并在短暂的延迟（250毫秒）后将其解析为true。 - mbursill

@mbursill 是的，我也使用了一个模态框，但是日期选择器不在模态框中，而是在主页面上；模态框有一个表单/按钮，点击后会发送到另一个页面，那时我遇到了错误（如我所记得的）。 - notbrain

ui-bootstrap将所有模板存储到templateCache中，如果在编译之前某些原因导致其被清除，则可能会抛出此错误，因为实际上它不存在。 - Strawberry

这个问题能否在 jsFiddle 或 Plunker 上重现？ - malix

Answer 1

我在更新ui.bootstrap至0.14.x时遇到了错误。

我覆盖了自己模块中的模板，导致出现了问题：

    angular.module("template/datepicker/datepicker.html", []).run(["$templateCache", function ($templateCache) {
    $templateCache.put("template/datepicker/datepicker.html",
      "<div ng-switch=\"datepickerMode\" role=\"application\" ng-keydown=\"keydown($event)\">\n" +
      "  <daypicker ng-switch-when=\"day\" tabindex=\"0\"></daypicker>\n" +
      "  <monthpicker ng-switch-when=\"month\" tabindex=\"0\"></monthpicker>\n" +
      "  <yearpicker ng-switch-when=\"year\" tabindex=\"0\"></yearpicker>\n" +
      "</div>");
    }]);

移除模块后，它又可以正常工作了。

最初我更改了模板，使用font-awesome图标代替glyphicons。现在我重写了glyphicon的CSS类，以更改为font-awesome图标：

.glyphicon {
    font: normal normal normal 14px/1 ourIconFont;
}
.glyphicon-arrow-right:before,
.glyphicon-chevron-right:before {
    content: "\f054";
}
.glyphicon-arrow-left:before,
.glyphicon-chevron-left:before {
    content: "\f053";
}

- Thomas

---

这也是我所做的。但即使在升级中重新添加模板缓存并再次修改FontAwesome，问题仍然存在。我已经没有精力再去验证了，代码又旧又尘土飞扬！但还是点了个赞。 - notbrain

Answer 2

我曾经遇到过同样的问题，我们的解决方案是，在升级到uib 0.14之后，我们有一个自定义的日期选择器模板，必须在日期选择器(day, month year)内添加 uib- 前缀。例如：

<div ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
  <daypicker ng-switch-when="day" tabindex="0"></daypicker>
  <monthpicker ng-switch-when="month" tabindex="0"></monthpicker>
  <yearpicker ng-switch-when="year" tabindex="0"></yearpicker>
</div>

改为

<div ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
  <uib-daypicker ng-switch-when="day" tabindex="0"></uib-daypicker>
  <uib-monthpicker ng-switch-when="month" tabindex="0"></uib-monthpicker>
  <uib-yearpicker ng-switch-when="year" tabindex="0"></uib-yearpicker>
</div>

- Jimmy

Answer 3

您需要将ui.bootstrap.0.12.0.js更新为ui-bootstrap-tpls-0.13.3.js

- Manij Rai - ITH

---

谢谢，但这个问题比0.13.3早了大约4个月。考虑到各种控件之间的复杂性和相互作用，可能永远无法解决。甚至可能在新版本中得到修复，但“等待更新”在那时不是一个选项。 - notbrain