Bootstrap进度条未显示

Question

好，

我正在使用一个小编程测试来使用Angular和Sinatra，我已经完成了逻辑，但是我想在play字段下添加一个小进度条来显示所做的动作。

我的haml模板如下所示：

.progress.progress-striped.active
    .progress-bar{role: "progressbar", :"aria-valuenow" => "{{moves}}", :"aria-valuemin" => 0, :"aria-valuemax" => 9}
        %span.sr-only
            {{moves}} moves out of 9

我已经将CDN中的Bootstrap CSS添加到了我的项目中，但该栏无法正常工作。 我只看到它的一部分：

试图玩这些课程，但这并没有任何区别。我已经检查过我是否使用了正确的类，情况也是如此。我还可以看到 aria - 值在每次点击时都会正确更新，因此绑定也可以。

源代码：https://github.com/NekoNova/tictactoe 有人可以给我一个关于我失踪的指针吗？

Answer 1

如果您想使用angular-ui bootstrap，可以使用此库以方便使用，这是另一种选择：

%script{ type: "text/javascript", src: "//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js" }

将模块“ui.bootstrap”添加到您的应用程序中：

var TicTacToeApp = angular.module('TicTacToeApp', ['ui.bootstrap']);

这是haml表达式：

%progressbar{ :max => "max", value: "dynamic"}
  %span{ style: "color: white;white-space: nowrap;"}
    {{dynamic}} / {{max}}

对于一些演示，这里是需要放入控制器的变量：

$scope.max = 100;
$scope.dynamic = 70;