奇怪的angular-ui datepicker依赖错误

Posted 2023-05-07

【中文标题】奇怪的angular-ui datepicker依赖错误

【英文标题】：Strange angular-ui datepicker dependency error

【发布时间】：2015-04-21 11:26:15

【问题描述】：

刚刚重新安装了一些凉亭组件，但这里的组件没有更新，同样0.12.0 ui.bootstrap。还使用ui-router 0.2.13 将状态更改为另一个页面。

奇怪的错误信息是

Error: [$compile:ctreq] Controller 'datepicker', required by directive 'daypicker', can't be found!

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

这可能是由错误的 datepicker 类名冲突引起的吗？

我知道这没什么好做的，但会在我有时间添加代码时进行更新。似乎某处可能存在冲突的datepicker。它只发生在从一页到另一页的 stateChange 上。在最后一页之前，使用日期选择器的完整流程可以正常工作。如果控制器依赖项在同一个文件中，它怎么会丢失？

如果有人以前见过这种情况，我将不胜感激。

2015 年 4 月 23 日更新：正在使用带有表单的模式对话框，该表单会在单击确定时将用户发送到另一个页面。

【问题讨论】：

我遇到了同样的问题，您找到任何解决方案/解决方法吗？

@RoyLing 不，我管理了一个不使用相同控制器的解决方法来避免错误。我的其他猜测是这可能与 angular-ui 尚未与 angular 1.3.x 完全兼容有关。除此之外，我没有想法。我试图在小提琴/plunker 中复制，但无法复制。

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

ui-bootstrap 将所有模板存储到 templateCache 中，如果由于某种原因在编译之前被清除，那么它可能会抛出此错误，因为它实际上并不存在。

这可以在 jsFiddle 或 Plunker 中重现吗？

【参考方案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>");
    ]);

删除模块后，它再次工作。

最初我更改了模板以使用令人敬畏的字体图标而不是字形图标。现在我重写 glyphicon css 类以更改字体真棒图标：

.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";

【讨论】：

这也是我正在做的。但即使在升级中重新添加模板缓存并再次修改 FontAwesome 后，它仍然是一个问题。只是没有足够的资金来验证，代码又旧又脏！但请投赞成票。

【参考方案2】：

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

【讨论】：

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

【参考方案3】：

遇到同样的问题，我们的解决方案是在升级到 uib 0.14 后，我们有一个用于 datepicker 的自定义模板，并且必须将 uib- 前缀添加到 datepicker 内的子指令中（日、月、年）。例如

<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>