Angular UI Bootstrap (Jade, Angular, Express) 进度条不工作

Question

我无法在 UI Bootstrap 中显示进度条。我已经在我的其他 js 文件中列出了依赖项 (angular.modeul('ui.bootstrap.demo',.....) 并且我已经完成了 npm install angular 和 npm install angular- ui-bootstrap。我还导入了我需要的所有东西（直接从 plunker）。我真的很难弄明白。我认为我的 jade 代码可能有问题：

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}} !!!小心！！！

编辑：刚刚检查了 jade 代码的 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();
});

控制台错误：控制台错误：语法错误：预期的表达式，在 example.js:1:0 中得到“<”？我的 example.js 出了点问题，但我的 jade 文件确实位于与 example.js

相同的路径中

Answer 1

您的脚本标签中有以 // 开头的 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。

Angular UI Bootstrap (Jade, Angular, Express) 进度条不工作

Angular UI Bootstrap (Jade, Angular, Express) progressbar not working

angular-ui-bootstrap

pug