引导进度条未显示

Question

好的，

我正在使用一个小型编程测试来玩转 Angular 和 Sinatra，我已经完成了逻辑方面的工作，但我想在游戏区域下方添加一个小的进度条来显示所做的动作。

我的 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 引导程序，只是一种替代用法，您可以使用此库来实现流畅和轻松的使用：

%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;