就像标题所说，每次我添加＆u ;.bootstrap＆＃39;到我的模块依赖项我的页面呈现空白，没有错误。如果我将其删除，页面会在没有手风琴菜单和日期选择器的情况下进行部分渲染。
我见过this
类似的StackOverflow问题但是将html2js添加到我的grunt并<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>添加到我的index.html并没有解决问题。任何帮助将不胜感激。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>"Carrepair2"</title>
<!-- build:css styles/vendor.css -->
<!-- <link rel="stylesheet" href="vendor/some.contrib.css"> -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/ionic/release/css/ionic.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="Carrepair2" ng-controller="AppCtrl">
<ion-nav-view></ion-nav-view>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- build:js scripts/vendor.js -->
<!-- <script src="vendor/someContribJs.js"></script> -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<!-- endbuild -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
</body>
</html>
'use strict';
angular.module('Carrepair2', ['ionic', 'ui.bootstrap', 'ui.templates'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.manage', {
url: '/manage',
views: {
'menuContent' :{
templateUrl: 'templates/manage.html'
}
}
})
.state('app.billing', {
url: '/billing',
views: {
'menuContent' :{
templateUrl: 'templates/billing.html'
}
}
})
.state('app.setup', {
url: '/setup',
views: {
'menuContent' :{
templateUrl: 'templates/setup.html',
controller: 'SetupCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/manage');
$locationProvider.html5Mode(true);
});
<ion-view title="Setup">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<div ng-controller="ShopSetupCtrl">
<accordion close-others="oneAtATime">
<accordion-group heading="Resources">
<h4>Add Your Shop's Resources.</h4>
<p>Click the 'plus' or 'minus' buttons to set the number of each resource your shop has. When finished click the Add All button.</p>
<div ng-repeat="resource in resources">
<img ng-src="{{resource.thumb}}">
{{resource.description}}
<div ng-controller="CounterController">
<button class="val_adjuster ion-minus-circled btn btn-default btn-sm" ng-click="decrement()"></button>
{{count}}
<button class="val_adjuster ion-minus-circled btn btn-default btn-sm" ng-click="count = count + 1" ng-init="count=0"></button>
</div>
</div>
<button class="btn btn-default btn-sm" ng-click="addItem()">Add All</button>
</accordion-group>
<accordion-group heading="Technicians">
<h4>Add Your Shop's Technicians.</h4>
<div class="row">
<input type="text" name="first-name" placeholder="First Name">
<input type="text" name="last-name" placeholder="Last Name">
<input type="email" name="email" placeholder="Email">
</div>
<div ng-controller="DatePickerCtrl" class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" placeholder=" Hire Date" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<h5>Check all held ASE Certifications</h5>
<ul ng-repeat="certificate in certifications">
<li class="item item-checkbox">
{{certificate}}
<label class="checkbox"></label>
<input type="checkbox">
</li>
</ul>
<button class="btn btn-default btn-md" ng-click="addTechnician()">Add Technician</button>
</accordion-group>
<accordion-group heading="Payment & Billing">
</accordion-group>
</accordion>
</div>
'use strict';
angular.module('Carrepair2.controllers', ['ionic', 'ui.bootstrap', 'ui.templates'])
.controller('AppCtrl', function($ionicPlatform) {
$ionicPlatform.ready(function() {
});
})
.controller('ShopSetupCtrl', function($scope) {
$scope.oneAtATime = true;
$scope.resources = [
{'thumb':'http://placekitten.com/50/50','description':'2-Post Surface Mounted'},
{'thumb':'http://placekitten.com/50/50','description':'4-Post Drive On'},
{'thumb':'http://placekitten.com/50/50','description':'Parallelogram Drive On'},
{'thumb':'http://placekitten.com/50/50','description':'Wheel Alignment Rack'},
{'thumb':'http://placekitten.com/50/50','description':'Single-Post In-Ground'},
{'thumb':'http://placekitten.com/50/50','description':'2-Post In-Ground'},
{'thumb':'http://placekitten.com/50/50','description':'Scissor-Lift'},
{'thumb':'http://placekitten.com/50/50','description':'Flat Bay'}
];
$scope.certifications = [
'Engine Repair',
'Automatic Transmission & Transaxle',
'Manual Drive Train & Axles',
'Suspension & Steering', 'Brakes',
'Electrical & Electronic Systems',
'Heating & Air Conditioning',
'Engine Performance',
'Light Vehicle Diesel Engines'
];
$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
})
.controller('CounterController', function($scope) {
$scope.decrement = function() {
$scope.count = $scope.count - 1;
if ($scope.count < 0){
$scope.count = 0;
}
};
})
.controller('DatePickerCtrl',function($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.initDate = new Date('2016-15-20');
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
});
答案 0 :(得分：3)
我在index.html head标签中缺少指向bootstrap依赖项的链接。
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
答案 1 :(得分：0)
没有任何错误消息，只是从查看代码，我唯一的猜测是你应该尝试在包括angular之后包含ui bootstrap 。具体而言，将其放在<!-- bower:js -->块的底部，<!---endbower-->之上。似乎ui bootstrap试图在angular之前初始化。
答案 2 :(得分：-1)
您必须在Angular脚本src之后包含bootstrap ui js文件。