Угловой UT Bootstrap (Jade, Angular, Express) progressbar не работает

У меня возникли проблемы с отображением индикатора выполнения в UI Bootstrap. Я перечислил зависимость в моем другом файле js (angular.modeul ('ui.bootstrap.demo', .....), и я сделал npm install angular, и npm установил угловую ui-bootstrap. Я также импортировал .. все, что нужно (прямо из plunker) Я действительно возникли проблемы, выясняя это, что я думаю, что может быть что-то не так с моей нефрита код:Угловой UT Bootstrap (Jade, Angular, Express) progressbar не работает

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 !!!

результат на экране: {{тип}} !!! Остерегайтесь !!!

Редактировать: только что проверил вывод html кода нефрита, и он соответствует html-коду для интерфейса пользовательского интерфейса. Я потерян ... он отлично работает в plunker, но не при запуске это приложение моего узла?

EDIT: Добавлено 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(); 
});

Console Ошибка: Ошибка консоли: SyntaxError: expectred выражение, получил '<' в example.js: 1: 0? Что-то не так с моим example.js, но мой файл нефрита действительно находятся в том же пути, как example.js

источник

2016-02-18 shapiro

Можете ли вы опубликовать содержимое example.js? –

Только что опубликованные example.js – shapiro

У вас возникли ошибки в консоли? –

Вы URIs начиная с // в тегах сценария Jour

просто добавить 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 в своем относительном пути.

источник

2016-02-18 21:10:07

просто попробовал. На самом деле это не работает, но теперь я вижу ошибки на консоли! Это означает, что это определенно помогло – shapiro

Ошибка консоли: SyntaxError: ожидаемое выражение, получило '<' в example.js: 1: 0? Что-то не так с моим example.js, но мой файл jade находится в том же пути, что и example.js. – shapiro

. У вас будет возможно «<» в качестве первого символа в вашем файле. Он начинается с тега скрипта? Удалите его или просто скопируйте example.js, как вы опубликовали его выше. –

Угловой UT Bootstrap (Jade, Angular, Express) progressbar не работает

ответ

Смежные вопросы