AngularJS脚本的引导程序不起作用答案

【问题标题】：Bootstrap for AngularJS scripts not workingAngularJS脚本的引导程序不起作用
【发布时间】：2015-01-03 06:27:24
【问题描述】：

我正在使用 angularFire 和 ui 引导程序。我所有的样式都很好，但没有任何 javascript 细节有效。我正在使用一个非常厚的模板（大量的插件和文件），所以我尝试在 index.html 中排序脚本标签的位置，但无济于事。例如：日期选择器、范围、模式都不起作用，但我在控制台中没有收到任何错误。这真让我抓狂！这是一些代码...希望对您有所帮助。

Index.html Bower 脚本在结束正文标记之前调用：

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<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.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
<script src="bower_components/mockfirebase/dist/mockfirebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.min.js"></script>
<script src="bower_components/angular-payments/lib/angular-payments.js"></script>
<!-- endbower -->

angular.module 调用：

angular.module('vagaApp', [
'ngAnimate',
'ui.bootstrap',
'angularPayments',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase',
'firebase.utils',
'simpleLogin',
'mm.foundation',
'angularSpinner'
]);

不工作的代码示例：

<h4>Popup</h4>
<div class="row">
    <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
    </div>
</div>

【问题讨论】：

不工作到底是什么意思？你看到未编译的角度表达式吗？只是没有数据被下载？对于没有按预期发生的事情，这非常模糊。可能的原因有无数种，所以如果没有an mcve，这里将很难提供帮助。

标签： angularjs datepicker firebase angular-ui-bootstrap angularfire

【解决方案1】：

“确保在你的项目中只包含一个文件。”

来自：https://github.com/angular-ui/bootstrap/wiki/FAQ

这可能是您的问题吗？尝试删除 'ui-bootstrap.min.js'

更多关于 *tpls.min.js 和 *min.js 的区别在这里：

What is the difference between ui-bootstrap-tpls.min.js and ui-bootstrap.min.js?

【讨论】：