бар Bootstrap Прогресс не показывая

Question

Okay,

Я использую небольшой тест программирования, чтобы играть с Угловыми и Синатрами, и я сделал логики мудрой, но я хотел бы добавить небольшой прогресс бар под игрой чтобы показать сделанные шаги.

мой шаблон 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 

Я добавил Bootstrap CSS от CDN к моему проекту, но бар не работает, как я хочу. я вижу только его часть:

Пробовал играть с классами, но это не делает никакой разницы. Я проверил, использую ли я правильные классы, и это тоже так. Я также могу видеть, что значения aria- должным образом обновляются при каждом нажатии, поэтому привязка также работает.

Исходный код: https://github.com/NekoNova/tictactoe Может ли кто-нибудь дать мне указатель на то, что мне не хватает?

Answer 1

Только альтернативное использование, если вы хотите использовать угловой-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}} 

И какое-то demostration вот переменные, которые необходимо ввести в ваш контроллер:

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