javascript - 如何使用 UI Bootstrap?

标签 javascript html angularjs twitter-bootstrap user-interface

我一直在互联网上搜索如何将 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 文件,但它永远不会工作。

最佳答案

您需要将 Angular Bootstrap 包含为依赖项:

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

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

关于javascript - 如何使用 UI Bootstrap?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32438151/

相关文章:

javascript - AngularJS 中的上一步

javascript - ionic -AngularJS : ion-toggle doesn't update the model

javascript - 使用鼠标滚轮向下/向上滚动一点,滚动到其他 div

javascript - 如何在 react-phone-number-input 中使用 material-ui TextField

javascript - 箭头表示法仅在 IE 中出现语法错误

html - 如何防止 Bootstrap 和列表中的水平滚动?

html - 如何在页面顶部制作第二个没有空格的正方形?

css - 如何根据媒体查询有效地使用不同的字体粗细

javascript - AngularJS 错误 : [ng:areq] Argument 'directiveFactory' is required

javascript - 未定义 JSONP 跨域