Angular UI Bootstrap（Jade、Angular、Express）进度条不起作用答案

【问题标题】：Angular UI Bootstrap (Jade, Angular, Express) progressbar not workingAngular UI Bootstrap（Jade、Angular、Express）进度条不起作用
【发布时间】：2016-02-19 06:07:48
【问题描述】：

我在 UI Bootstrap 中显示进度条时遇到问题。我已经在我的其他 js 文件（angular.modeul('ui.bootstrap.demo',.....) 中列出了依赖项，并且我已经完成了 npm install angular 和 npm install angular-ui-bootstrap。我还导入了我需要的一切（直接来自 plunker）。我真的很难弄清楚这一点。我认为我的玉代码可能有问题：

doctype html
html(ng-app='ui.bootstrap.demo')
  head
    script(src='http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js')
    script(src='http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js')
    script(src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.2.js')
    script(src='example.js')
    link(href='http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', rel='stylesheet')
  body
    div(ng-controller='ProgressDemoCtrl')
      small
        em Object (changes type based on value)
      uib-progressbar.progress-striped.active(value='dynamic', type='{{type}}')
        | {{type}} 
        i(ng-show='showWarning') !!! Watch out !!!

屏幕上的结果是：{{type}} !!!小心！！！

编辑：刚刚检查了翡翠代码的 html 输出，它与 UI 进度条的 html 代码匹配。我迷路了...它在 plunker 中运行良好，但在我使用节点应用程序运行时却不行？

编辑：发布 example.js

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ProgressDemoCtrl', function ($scope) {
  $scope.max = 200;

  $scope.random = function() {
    var value = Math.floor(Math.random() * 100 + 1);
    var type;

    if (value < 25) {
      type = 'success';
    } else if (value < 50) {
      type = 'info';
    } else if (value < 75) {
      type = 'warning';
    } else {
      type = 'danger';
    }

    $scope.showWarning = type === 'danger' || type === 'warning';

    $scope.dynamic = value;
    $scope.type = type;
  };

  $scope.random();

  $scope.randomStacked = function() {
    $scope.stacked = [];
    var types = ['success', 'info', 'warning', 'danger'];

    for (var i = 0, n = Math.floor(Math.random() * 4 + 1); i < n; i++) {
        var index = Math.floor(Math.random() * 4);
        $scope.stacked.push({
          value: Math.floor(Math.random() * 30 + 1),
          type: types[index]
        });
    }
  };

  $scope.randomStacked();
});

控制台错误：控制台错误：SyntaxError：预期的表达式，在 example.js:1:0 中得到 '

【问题讨论】：

可以发布example.js的内容吗？
刚刚发布的example.js
您的控制台是否有任何错误？
是的，我看到了错误。 '由于模块'ui.bootstrap.demo'无法实例化模块ui.bootstrap.demo'不可用。您要么拼错了模块名称，要么忘记加载它'

标签： pug angular-ui-bootstrap

【解决方案1】：

在 jour 脚本标签中有以 // 开头的 URI

只需添加http 或https

doctype html
html(ng-app='ui.bootstrap.demo')
  head
    script(src='http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js')
    script(src='http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js')
    script(src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.2.js')
    script(src='example.js')
    link(href='http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', rel='stylesheet')
  body
    div(ng-controller='ProgressDemoCtrl')
      small
        em Object (changes type based on value)
      uib-progressbar.progress-striped.active(value='dynamic', type='{{type}}')
        | {{type}} 
        i(ng-show='showWarning') !!! Watch out !!!

编译：

<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.2.js"></script>
  <script src="example.js"></script>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div ng-controller="ProgressDemoCtrl"><small><em>Object (changes type based on value)</em></small>
    <uib-progressbar value="dynamic" type="{{type}}" class="progress-striped active">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></uib-progressbar>
  </div>
</body>

</html>

你应该看到类似的东西

否则将您的错误消息添加到您的问题中。

它在 plunker 中工作，因为它会自动添加它或在其相对路径中有 js-libs。

【讨论】：

刚试过。实际上它不起作用，但现在我在控制台上看到错误！这意味着它肯定有帮助
控制台错误：SyntaxError：预期的表达式，在 example.js:1:0 中得到 '
您可能会将 '
它实际上并不是从那个开始的。我很混乱。我确实复制了上面的 example.js，但仍然给我那个错误
刚刚尝试在没有 Nodejs 的情况下使用它，它可以工作。所以它可能与我的路由有关。顺便谢谢！