Question

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

SyntaxError：expect expression，got'＆lt;'在ui-bootstrap-1.3.3.js：5：0

这是第一个问题。我没有在文件中编辑任何内容，但它为第一行<!DOCTYPE html>

表示了意外的令牌

另一个如下：

错误：[$ injector：modulerr]由于以下原因无法实例化模块应用： [$ injector：modulerr]无法实例化模块ui.bootstrap，原因如下： [$ injector：nomod]模块'ui.bootstrap'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

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

下面是我的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

角
角动画
角点触摸所有人都有版本AngularJS v1.5.3

Answer 1

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

请在下面找到工作的plunker：

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

Answer 2

您缺少ui-bootstrap-tpls.js个文件。

在您的页面中添加此文件。

参见示例working plunkr

Answer 3

在我的情况下，在旧版应用程序（AngularJS 1.3）中，这是因为我将angular-ui-bootstrap放置在bower.js而不是package.js中。

将其放到package.js，运行npm install，复制到某个源目录并添加到导入中之后，它可以正常工作。

import '../js/dependencies/ui-bootstrap-tpls-0.14.3.min'

不过，这可能不是正确的方法。
我认为应该从bower_modules导入。

import '../bower_components/angular-ui-bootstrap/???';

但是，Bower托管不再起作用，并且HTTP 502尝试通过bower install安装失败。

还有，奇怪的是，它有效了除非我注册了提供商：

.config(['$tooltipProvider', function ($tooltipProvider) { ...

这样，Angular开始抱怨'$tooltipProvider'未知。

希望这会有所帮助，尽管我对旧的AngularJS不太了解，所以可以将其作为可能中等的解决方案。

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

3 个答案: