我需要包括角度引导程序只是简单的工作

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标签之外，也不会看到来自datepicker的popover，我的google chrome中没有错误。

但是当我点击datepicker按钮时没有popover ...

更新

现在我纠正了我的angularjs模块，现在我只使用它：'ui.bootstrap.datepicker'

我现在在google chrome中得到这些错误：

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凉亭包。是否应该包括所有内容？

UPDATE2

我现在得到这些angularjs错误：

看到父级为null，因此parent.InsertBefore无法正常工作并抛出异常......

Answer 1

Official Doc

ui-bootstrap-tpls.js库包含指令和指令模板。

ui-bootstrap.js只是指令，您需要提供指令模板。

大多数人使用预定义的指令模板（ui-bootstrap-tpls.js）。您不希望包含这两者，这可能是popover / datepicker不起作用的原因。你基本上有2个指令用于显示/隐藏popover / datepicker。另外，不要加载bootstrap.js库，因为这会导致同样的问题。

<强>更新

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

在ui-bootstrap-tpls.js文件中，您应该看到多条$templatecache.put行，'template/datepicker/datepicker.html'就是其中之一。

Answer 2

以防其他人遇到同样的问题：我遇到了datepicker的问题，问题是我在基础JS之前加载了模板：

自：

<script src="/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap.min.js"></script>

要：

<script src="/Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>

Answer 3

我也遇到了这个问题，上面的答案对我帮助很大！

在我的实例中，我使用了一个角形构造，并用凉亭安装了ui-bootsrap。问题是多次引用ui-bootrap和bootstrap与tpls.js verison冲突

以下是我的解决方案： 简单地放在我的index.html

中

删除的

<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>

添加

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

Answer 4

问题：

此问题是

的Google搜索结果

Error: [$compile:tpload] Failed to load template: templates/datetimepicker.html

这可能不是您特定问题的直接答案，但我想留意未来用户遇到类似问题的说明。

指令 daleotts / angular-bootstrap-datetimepicker 在v1.0.0中引入了重大变化：

  

必须在页面中包含datetimepicker.template.js才能加载   模板。   （b520f515）

解决方案：

angular-bootstrap-datetimepicker的用户可以回滚到以前的版本（例如v0.40），也可以选择包含以前包含在基本.js文件中的模板文件：

// Previously this was the needed file
<script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"></script>
// Users who wish to use the default datetimepicker templates must now also include this file
<script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js"></script>