angularjs – 使用ui.bootstrap导致轮播的问题

前端之家收集整理的这篇文章主要介绍了angularjs – 使用ui.bootstrap导致轮播的问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有问题让转盘工作正常。我使用yeomen来支撑角度的应用程序。
我收到这个错误
  1. Error: [$compile:ctreq] Controller 'carousel',required by directive 'slide',can't be found!
  2. http://errors.angularjs.org/1.2.26/$compile/ctreq?p0=carousel&p1=slide
  3. at http://localhost:9000/bower_components/angular/angular.js:78:12
  4. at getControllers (http://localhost:9000/bower_components/angular/angular.js:6543:19)
  5. at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6712:35)
  6. at http://localhost:9000/bower_components/angular/angular.js:6913:13
  7. at http://localhost:9000/bower_components/angular/angular.js:8113:11
  8. at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
  9. at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
  10. at http://localhost:9000/bower_components/angular/angular.js:11659:26
  11. at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12702:28)
  12. at Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <div ng-class="{
  13. 'active': leaving || (active &amp;&amp; !entering),'prev': (next || active) &amp;&amp; direction=='prev','next': (next || active) &amp;&amp; direction=='next','right': direction=='prev','left': direction=='next'
  14. }" class="left carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="prev"> angular.js:10072
  15. Error: [$compile:ctreq] Controller 'carousel','left': direction=='next'
  16. }" class="right carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="next"> angular.js:10072

这是我的html文件

  1. <style>
  2. #slides_control > div{
  3. height: 200px;
  4. }
  5. img{
  6. margin:auto;
  7. width: 400px;
  8. }
  9. #slides_control {
  10. position:absolute;
  11. width: 400px;
  12. left:50%;
  13. top:20px;
  14. margin-left:-200px;
  15. }
  16. .carousel-control.right {
  17. background-image: linear-gradient(to right,rgba(0,.0001) 0%,rgba(237,232,0.5) 100%) !important;
  18. }
  19. .carousel-control.left {
  20. background-image: linear-gradient(to right,rgba(249,248,0.5) 0%,.0001) 100%) !important;
  21. }
  22. </style>
  23. <div id="Carousel" class="carousel slide">
  24. <ol class="carousel-indicators">
  25. <li data-target="Carousel" data-slide-to="0" class="active"></li>
  26. <li data-target="Carousel" data-slide-to="1"></li>
  27. <li data-target="Carousel" data-slide-to="2"></li>
  28. </ol>
  29. <div class="carousel-inner">
  30. <div class="item active">
  31. <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_41.png" class="img-responsive">
  32. </div>
  33. <div class="item">
  34. <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_45.png" class="img-responsive">
  35. </div>
  36. <div class="item">
  37. <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_49.png" class="img-responsive">
  38. </div>
  39. </div>
  40. <a class="left carousel-control" href="#Carousel" data-slide="prev">
  41. <span class="glyphicon glyphicon-chevron-left"></span>
  42. </a>
  43. <a class="right carousel-control" href="#Carousel" data-slide="next">
  44. <span class="glyphicon glyphicon-chevron-right"></span>
  45. </a>
  46. </div>

我的控制器是

‘use strict’;

angular.module( ‘myhApp’)
.controller(‘MainCtrl’,function($ scope){
});

这是我的app.js

  1. angular
  2. .module('myhApp',[
  3. 'ngAnimate','ngCookies','ngResource','ngRoute','ngSanitize','ngTouch','ui.bootstrap'
  4. ])
  5. .config(function ($routeProvider) {
  6. $routeProvider
  7. .when('/',{
  8. templateUrl: 'views/main.html',controller: 'MainCtrl'
  9. })
  10. .when('/about',{
  11. templateUrl: 'views/about.html',controller: 'AboutCtrl'
  12. })
  13. .otherwise({
  14. redirectTo: '/'
  15. });
  16. });

我不知道是什么造成的。任何帮助将不胜感激。

**近期有些调查结果**

好的,我做了一些挖掘,发现我必须在dom中有转盘(指示错误)。当我添加旋转木马时,错误消失,但是我的转盘不再工作,看起来也很不错。

这是我对html的改变

  1. <div id="Carousel" class="carousel slide" carousel>

这里是如何看起来,你可以看到猫脸上有一个额外的箭头。我不知道会发生什么事情。任何帮助都将被欣赏

我能够通过将ng-non-bindable添加到具有data-slide指令的元素来解决冲突。见下文:
  1. <a data-slide="prev" href="#clients-slider" ng-non-bindable class="left carousel-control"></a>

猜你在找的Angularjs相关文章