0

就像标题所说，每次我将“ui.bootstrap”添加到我的模块依赖项时，我的页面都会呈现为空白且没有错误。如果我删除它，页面会部分呈现，而没有手风琴菜单和日期选择器。

我见过这个 类似的 StackOverflow 问题，但是将 html2js 添加到我的 grunt 和<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>我的 index.html 并没有解决问题。任何帮助，将不胜感激。

我的 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>

我的 app.js 路线

'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];
});
4

2 回答 2

3

我的 index.html 头标记中缺少指向引导依赖项的链接。

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
  rel="stylesheet">
于 2014-06-10T18:52:10.883 回答
0

没有任何错误消息，仅通过查看代码，我唯一的猜测是您应该尝试在包含 angular之后包含 ui bootstrap。具体来说，把它放在块的底部<!-- bower:js -->，上面<!---endbower-->。似乎 ui bootstrap 正在尝试在 angular 之前进行初始化。

于 2014-06-10T03:50:11.087 回答