javascript - Angular with ui.bootstrap 渲染空白页面

标签 javascript angularjs twitter-bootstrap carousel

我使用 Yeoman 创建了一个包含 Bootstrap 的 Angular 应用程序。然后，我根据 https://github.com/angular-ui/bootstrap 上的自述文件中的说明使用 Bower 安装 ui.bootstrap .

我现在正在尝试调整 http://angular-ui.github.io/bootstrap/ 的轮播示例.

当我包含 ui.bootstrap 时，我只会得到一个空白页面。我在 Chrome 和 Firefox 中尝试了该页面，但没有在控制台中收到任何错误或输出。

这是我的 js (cat.js):

 'use strict';
angular.module('yoApp', ['ui.bootstrap'])
.controller('CatCtrl', function ($scope, $http) {

  var cats = $http.get('/rt/cats.json')
  .success(
    function (data, status, headers, config) { 
      $scope.slides = data;
    });

  $scope.myInterval = 5000;
  var slides = $scope.slides;
  $scope.addSlide = function() {
    var newWidth = 200 + ((slides.length + (25 * slides.length)) % 150);
    slides.push({
      image: 'http://placekitten.com/' + newWidth + '/200',
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
      ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
  for (var i=0; i<4; i++) {
    $scope.addSlide();
  }
});

我在有和没有 http.get 的情况下都试过了。

html页面:

<carousel interval="myInterval">
    <slide ng-repeat="slide in slides" active="slide.active">
      <img ng-src="{{slide.image}}" style="margin:auto;">
      <div class="carousel-caption">
        <h4>Slide {{$index}}</h4>
        <p>{{slide.text}}</p>
      </div>
    </slide>
  </carousel>
  <div class="row-fluid">
    <div class="span6">
      <ul>
        <li ng-repeat="slide in slides">
          <button class="btn btn-mini" ng-class="{'btn-info': !slide.active, 'btn-success': slide.active}" ng-disabled="slide.active" ng-click="slide.active = true">select</button>
          {{$index}}: {{slide.text}}
        </li>
      </ul>
      <a class="btn" ng-click="addSlide()">Add Slide</a>
    </div>
    <div class="span6">
      Interval, in milliseconds: <input type="number" ng-model="myInterval">
      <br />Enter a negative number to stop the interval.
    </div>
  </div>

我已经设置了路线:

'use strict';

angular.module('yoApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ui.bootstrap'
])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/cat', {
        templateUrl: 'views/cat.html',
        controller: 'CatCtrl'
      })
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

奇怪的是，当我在 cat.js 中取出 ['ui.bootstrap'] 时，页面的一部分实际上呈现了，但我在 Chrome 中遇到了这些错误:

> TypeError: Cannot read property 'length' of undefined
    at Object.$scope.addSlide (http://localhost:9000/scripts/controllers/cat.js:14:34)
    at new <anonymous> (http://localhost:9000/scripts/controllers/cat.js:22:12)
    at invoke (http://localhost:9000/bower_components/angular/angular.js:3000:28)
    at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:3012:23)
    at http://localhost:9000/bower_components/angular/angular.js:4981:24
    at update (http://localhost:9000/bower_components/angular/angular.js:14509:26)
    at Object.Scope.$broadcast (http://localhost:9000/bower_components/angular/angular.js:8468:28)
    at http://localhost:9000/bower_components/angular/angular.js:7614:26
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:6995:59)
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:6995:59) angular.js:5930
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/template/carousel/slide.html
Error: Failed to load template: template/carousel/slide.html
    at Error (<anonymous>)
    at http://localhost:9000/bower_components/angular/angular.js:4725:17
    at http://localhost:9000/bower_components/angular/angular.js:9144:11
    at wrappedErrback (http://localhost:9000/bower_components/angular/angular.js:7004:57)
    at http://localhost:9000/bower_components/angular/angular.js:7080:53
    at Object.Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:8218:28)
    at Object.Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:8077:25)
    at Object.Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:8304:24)
    at done (http://localhost:9000/bower_components/angular/angular.js:9357:20)
    at completeRequest (http://localhost:9000/bower_components/angular/angular.js:9520:7)

关于我可能做错了什么的任何想法？我已经能够让其他功能在其他 Controller 中工作，并且可以在 Bootstrap 主题中呈现纯文本，但由于某种原因我无法让轮播工作。

在遵循 pkozlowski-opensource 的建议后，这是我的 index.html 和我的包含。我只能通过在模块声明中省略 ['ui.bootstrap'] 来渲染轮播页面，所以我一定还是做错了什么。

    <!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <!-- build:css(.tmp) styles/main.css -->
        <link rel="stylesheet" href="styles/bootstrap.css">
        <link rel="stylesheet" href="styles/main.css">
        <!-- endbuild -->
</head>
  <body ng-app="yoApp">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!--[if lt IE 9]>
      <script src="bower_components/es5-shim/es5-shim.js"></script>
      <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="container" ng-view=""></div>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>

        <!-- build:js scripts/plugins.js -->
<!--         // <script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-button.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script> -->
<!--         // <script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script> -->
        <!-- endbuild -->

        <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

        <!-- build:js scripts/modules.js -->

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

        <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="//localhost:35729/livereload.js"></script>
        <script src="scripts/app.js"></script>

         <script src="scripts/controllers/cat.js"></script>
        <!-- endbuild -->
</body>
</html>

最佳答案

正如@Elise Chant 在上面的评论中指出的——包括:

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

为我修复了引用/template/X.html 文件的 404 错误。

关于javascript - Angular with ui.bootstrap 渲染空白页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19782575/

上一篇：javascript - 在 Angular JS 中撤消重做

下一篇：javascript - JS/JQuery 在 1 秒后重试 Img 加载

相关文章：

html - 在 bootstrap 2.3.2 行中居中两个 div

javascript - 打印带有图像的 html(每个图像在单独的页面上)

javascript - 在foreach javascript( Angular )中用foreach填充数组

javascript - 使用 ng-repeat 动态加载指令

html - 修复 Bootstrap 中的页脚

javascript - Bootstrap AJAX 选项卡不起作用，没有任何反应

javascript - jPanelMenu 在 IE(所有版本)中无法正常工作

javascript - 调整大小时不会重新计算 Div 高度

javascript - 使用canvas2image将FLOT图表保存到图像文件

javascript - Angular UI bootstrap uibModalInstance.result 没有产生任何值

©2024 IT工具网  联系我们