angularjs - 我需要什么来包含那个 Angular Bootstrap 才可以工作

Question

我已将这些包含在我的 index.html 中，因为 bower 包含它们:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->

为什么不包括 ui-bootstrap.js？因为 bootstrap 中的 bower.json 及其主要属性设置了“ui-bootstrap-tpls.js”，但是 ui-bootstrap.js 呢？

即使我将文件包含在 bower:js 标记之外，日期选择器中的弹出框也不可见，并且我的 google chrome 中没有任何错误。

但是当我点击日期选择器按钮时，没有弹出窗口......

更新

现在我更正了我的 angularjs 模块，现在我只使用这个: 'ui.bootstrap.datepicker'
我现在在谷歌浏览器中得到这些错误:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/template/datepicker/datepicker.html
Error: [$compile:tpload] Failed to load template: template/datepicker/datepicker.html

当我查看源 ui-bootstrap-tpls.js 文件时:

.directive( 'datepicker', function () {
  return {
    restrict: 'EA',
    replace: true,
    templateUrl: 'template/datepicker/datepicker.html',
    scope: {
      datepickerMode: '=?',
      dateDisabled: '&'
    },

这些上面的路径模板在哪里...？我有他们不在这里。我刚刚安装了 angular-bootstrap bower 包。不应该全部包括吗？

更新2

我现在收到这些 angularjs 错误:



看到父级为空，因此 parent.InsertBefore 不能工作并抛出异常......

Answer 1

Official Doc
ui-bootstrap-tpls.js库包含指令和指令模板。
ui-bootstrap.js只是指令，您需要提供指令模板。

大多数人使用预定义的指令模板(ui-bootstrap-tpls.js)。您不想同时包含两者，这可能是弹出框/日期选择器不起作用的原因。您基本上将有 2 个指令用于显示/隐藏弹出框/日期选择器。此外，不要加载 bootstrap.js 库，因为这会导致同样的问题。

更新:

关于模板未找到错误，datepicker 指令正在寻找模板 'template/datepicker/datepicker.html'在 $templatecache . ui-bootstrap-tpls.js将模板注入(inject)到 js 文件末尾的模板缓存中。

在 ui-bootstrap-tpls.js文件你应该看到几个 $templatecache.put带有 'template/datepicker/datepicker.html' 的行作为其中之一。