8

AngularDart 入門ガイドの指示に従って、プロジェクトで AngularStrap datepicker を使用しようとしています 。機能は問題ありませんが、外観が異なります。自分のスタイルシートがロードされていなくても、見た目は本来あるべきものではありません。次の 2 つのスクリーンショットで問題が明確になります。

どのように見えるか:

どのように見えるべきか

実際の外観:

ここに画像の説明を入力

アプリケーションは yeoman.io でスキャフォールディングされます

bower.json 構成:

{
  "name": "myapp",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.2.14",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "jquery": "~1.10.2",
    "bootstrap": "~3.1.0",
    "angular-resource": "1.2.14",
    "angular-cookies": "1.2.14",
    "angular-sanitize": "1.2.14",
    "angular-route": "1.2.14",
    "moment": "~2.5.1",
    "angular-strap": "~2.0.0",
    "angular-motion": "~0.3.2",
    "angular-animate": "~1.2.14"
  },
  "devDependencies": {
    "angular-mocks": "1.2.14",
    "angular-scenario": "1.2.14"
  },
  "resolutions": {
    "angular": "1.2.14"
  }
}

関連する index.html スニペット:

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.min.css" />
...
<link rel="stylesheet" href="styles/style.css"/>
....
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>

HTML の datepicker 入力タグ:

<input type="text" class="form-control" ng-model="selectedDate" name="date" data-date-format="dd-MM-yyyy" data-start-view="2" bs-datepicker>
4

1 に答える 1