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

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

即使我将文件包含在凉亭外:js标签,来自日期选择器的弹出窗口也不可见,我的谷歌浏览器中没有错误.

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

UPDATE

现在我纠正了我的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凉亭包.是否应该包括所有内容？

UPDATE2

我现在得到这些angularjs错误:

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

Answer 1

官方文件

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

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>