如何使用 UI 引导程序？答案

【问题标题】：How do I use UI Bootstrap?如何使用 UI 引导程序？
【发布时间】：2015-12-02 23:29:38
【问题描述】：

我一直在互联网上搜索如何使用 UI Bootstrap 和 AngularJS，但我不会工作。

这是我现在的代码：

<html>
<head>
<script src="componenten/bower_components/angular/angular.js"></script>
<script src="componenten/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="componenten/bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
</head>
<body ng-app="ui.bootstrap.demo">
<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>
    <button type="button" class="btn btn-default" ng-click="open()">Open me!       </button>
    <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
    <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
    <button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
    </div>
</body>
</html>

我已经尝试添加几乎所有脚本和 css 文件，但它永远不会起作用。

【问题讨论】：

标签： javascript html angularjs twitter-bootstrap user-interface

【解决方案1】：

您需要包含 Angular Bootstrap 作为依赖项：

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

请删除ui-bootstrap.min.js 因为ui-bootstrap-tpls.min.js 包含代码和模板。

【讨论】：

Okey 已经修复了很多，当我启动页面时不再出现错误，但是当我单击按钮时又出现错误。
这是控制台中显示的错误“[$compile:tpload] Failed to load template: template/modal/window.html (HTTP status: 404 Not Found)”
请删除ui-bootstrap.min.js 脚本标签。您只需要ui-bootstrap-tpls.min.js 一个，它包含代码和模板。
我认为您需要更改加载引导 JS 文件的顺序。
@SimoEndre 不...您使用其中一个或另一个...而不是两者。