Question

我刚刚将angularJS添加到我的项目中，我现在正在尝试将AngularUI添加到我的项目中，但它无法正常工作。按钮看起来不像他们应该的那样好看。我的网页看起来像http://postimg.org/image/mzgqlk7mr/

这是我的代码：

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

Answer 1

这是一个从AngularUI Bootstrap演示页面（http://angular-ui.github.io/bootstrap/）分叉的简单插件：http://plnkr.co/edit/frWpYAfC1TlZ13xNQzSV?p=preview

通过将此plunker与您的代码进行比较，您会注意到：

你不包括angular-ui / bootstrap JavaScript（！）
您需要在ui.bootstrap模块

另一方面，你包括Bootstrap的JavaScript，这是完全没必要的。

无法安装AngularUI

1 个答案: