2014-01-22 2 views
0

Я только что добавил angularJS в свой проект, и теперь я пытаюсь добавить AngularUI в свой проект, но он работает неправильно. Кнопки выглядят не так хорошо, как предполагалось. Моя веб-страница выглядит http://postimg.org/image/mzgqlk7mr/Неисправность установки AngularUI

Вот мой код:

<!DOCTYPE html> 
<html ng-app> 
<head> 
<title></title> 
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" /> 
    <link href="menu_source/styles.css" rel="stylesheet" type="text/css"> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 

</head> 
<body> 
<div id='cssmenu'> 




     <!-- 
     <div ng-controller="logOut"> 
    <h4>Single toggle</h4> 
    <pre>{{singleModel}}</pre> 
    <button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0"> 
     Single Toggle 
    </button> 
    --> 


    </div> 


    <div id="content"> 
    Name:<input type="text" ng-model="name" /> {{name}} 
    </div> 
    <div id="content1"> 
<div ng-controller="ButtonsCtrl"> 
    <h4>Single toggle</h4> 
    <pre>{{singleModel}}</pre> 
    <button type cv="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0"> 
     Single Toggle 
    </button> 
    <h4>Checkbox</h4> 
    <pre>{{checkModel}}</pre> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-primary" ng-model="checkModel.left" btn-checkbox>Left</button> 
     <button type="button" class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</button> 
     <button type="button" class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</button> 
    </div> 
    <h4>Radio</h4> 
    <pre>{{radioModel}}</pre> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</button> 
     <button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</button> 
     <button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</button> 
    </div> 
</div> 





<script src="angular.min.js"></script> 
</body> 
</html> 

ответ

1

Вот простой plunker раздвоенный из демонстрационной странице AngularUI Bootstrap (http://angular-ui.github.io/bootstrap/): http://plnkr.co/edit/frWpYAfC1TlZ13xNQzSV?p=preview

Сравнивая это plunker с кодом, вы обратите внимание, что:

  • вы не включая угловую-щ/самозагрузки JavaScript
  • (!)
  • вам нужно добавить зависимость от модуля

ui.bootstrap С другой стороны, вы в том числе JavaScript Bootstrap, который является совершенно ненужным.

+0

Удивительный ресурс. Благодаря! – user3159568

+0

Фактически я использую этот точный код, чтобы проверить его сейчас. Я скопировал и вставил его поверх своего предыдущего кода и даже поместил файл example.js в корневой каталог с файлом index.html. и я все еще получаю тот же результат с кнопками, что и раньше. Что может быть причиной? – user3159568

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