Question

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

编辑：刚刚检查了jade代码的html输出，它与UI Progressbar的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：expectred expression，得到'＆lt;'在example.js：1：0？我的example.js出了点问题，但我的jade文件与example.js位于同一路径

Answer 1

您在jour script tags中以//开头的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）进度条不起作用

1 个答案: