个人中心
gpt4 book ai didi

angularjs - 为什么模块 'ui.bootstrap' 不可用？

转载 作者：行者123 更新时间：2023-12-01 12:27:07 24 4
gpt4 key购买 nike

我正在尝试这个简单的教程来尝试 UI Bootstrap: https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
但我遇到了两个问题。

SyntaxError: expected expression, got '<' at ui-bootstrap-1.3.3.js:5:0

这是第一个问题。我没有编辑文件中的任何内容，但第一行显示意外标记 <!DOCTYPE html>

另外一个如下:

Error: [$injector:modulerr] Failed to instantiate module app due to: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我看到了所有相关问题的答案，其中一些建议包括其他依赖项，而另一些建议确保依赖项的顺序。尝试了一切，但没有快乐。

下面是我的html和js代码。请看一看
HTML

<html>
<head>
<style type="text/css"> 
            @import "css/bootstrap.css";
            @import "css/style.css";
        </style>
        <script src="js/angular.js"></script>
        <script src="js/angular-animate.js"></script>
        <script src="js/angular-touch.js"></script>
        <script src="js/ui-bootstrap-1.3.3.js"></script>
        <script src="js/app.js"></script>
</head>
<body>
<div class="container" ng-app="app" ng-controller="mainController">

  <div class="text-center">
    <p>Example of Angular and the normal Bootstrap JavaScript components</p>
    <p class="text-success">This will work</p>
  </div>

  <h2>Buttons</h2>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>
      Breakfast
    </label>
    <label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>
      Lunch
    </label>
    <label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>
      Dinner
    </label>
  </div>

  <pre><code>{{ bigData | json }}</code></pre>

  <h2>Collapse</h2>

  <a href="#" class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">
    Toggle Panel
  </a>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a href="#" ng-click="isCollapsed = !isCollapsed">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div collapse="isCollapsed">
      <div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

  <pre><code>{{ isCollapsed }}</code></pre>

</div>
</body>
</html>

JS

angular.module('app', ['ngAnimate', 'ngTouch', 'ui.bootstrap'])

.controller('mainController', function($scope) {

  // BUTTONS ======================

  // define some random object
  $scope.bigData = {};

  $scope.bigData.breakfast = false;
  $scope.bigData.lunch = false;
  $scope.bigData.dinner = false;

  // COLLAPSE =====================
  $scope.isCollapsed = false;

});

不确定出了什么问题。

编辑版本详情区如下
Bootstrap v3.3.6

棱 Angular 分明
Angular 动画
Angular 触摸都有版本 AngularJS v1.5.3

最佳答案

确保 ui-bootstrap-1.3.3 已正确加载到您的应用中。

请在下面找到工作插件:

http://plnkr.co/edit/evG4XQ9ih9Cx0d1WF6YU?p=preview

关于angularjs - 为什么模块 'ui.bootstrap' 不可用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38261080/

24 4 0
文章推荐： assembly - 为什么这段代码在调用函数后两次弹出到同一个寄存器？
文章推荐： coq - Coq 分支和回溯的多次成功？
文章推荐： django - 模型中的用户 OneToOneField
文章推荐： firebase - iOS 离线时的 FCM 行为
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com