Like the title says each time I add 'ui.bootstrap' to my module dependency my page renders blank with no errors. If I remove it the page renders partially without the accordion menu and date picker.
就像标题说每次我将'ui.bootstrap'添加到我的模块依赖项时,我的页面呈现空白而没有错误。如果我删除它,页面呈现部分没有手风琴菜单和日期选择器。
I had seen this similar * problem but adding the html2js to my grunt and <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> to my index.html didn't fix the problem. Any help would be appreciated.
我已经看到了类似的*问题但是将html2js添加到我的grunt并将
My 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>
My app.js routes
'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);
});
My template
<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>
My controllers
'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];
});
3 个解决方案
#1
3
I was missing the link to the bootstrap dependency in my index.html head tag.
我在index.html head标签中缺少bootstrap依赖项的链接。
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
#2
0
Without any error messages, and just from looking at the code, my only guess is that you should try including ui bootstrap after including angular. Specifically, put it at the bottom of the <!-- bower:js --> block, above <!---endbower-->. It seems ui bootstrap is trying to initialize before angular is.
没有任何错误消息,只是从查看代码,我唯一的猜测是你应该尝试包括ui bootstrap后包括角度。具体来说,将它放在 块的底部,
#3
-1
You have to include the bootstrap ui js file after the Angular script src.
您必须在Angular脚本src之后包含bootstrap ui js文件。
#1
3
I was missing the link to the bootstrap dependency in my index.html head tag.
我在index.html head标签中缺少bootstrap依赖项的链接。
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
#2
0
Without any error messages, and just from looking at the code, my only guess is that you should try including ui bootstrap after including angular. Specifically, put it at the bottom of the <!-- bower:js --> block, above <!---endbower-->. It seems ui bootstrap is trying to initialize before angular is.
没有任何错误消息,只是从查看代码,我唯一的猜测是你应该尝试包括ui bootstrap后包括角度。具体来说,将它放在 块的底部,
#3
-1
You have to include the bootstrap ui js file after the Angular script src.
您必须在Angular脚本src之后包含bootstrap ui js文件。