using ui.bootstrap causing issues with carousel

667 views
Skip to first unread message

Autolycus

unread,
Oct 13, 2014, 11:53:15 PM10/13/14
to ang...@googlegroups.com
I am having issues with getting the carousel working properly. I used yeomen to scaffold the angular app.
I am getting this error

    Error: [$compile:ctreq] Controller 'carousel', required by directive 'slide', can't be found!
        at Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <div ng-class="{
        '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'
      }" class="left carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="prev"> angular.js:10072
    Error: [$compile:ctreq] Controller 'carousel', required by directive 'slide', can't be found!
        at Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <div ng-class="{
        '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'
      }" class="right carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="next"> angular.js:10072

here is my html file

     <style>
                #slides_control > div{
                    height: 200px;
                }
                img{
                    margin:auto;
                    width: 400px;
                }
                #slides_control {
                    position:absolute;
                    width: 400px;
                    left:50%;
                    top:20px;
                    margin-left:-200px;
                }
                .carousel-control.right {
                    background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(237, 232, 232, 0.5) 100%) !important;
                }
                .carousel-control.left {
                    background-image: linear-gradient(to right, rgba(249, 248, 248, 0.5) 0%, rgba(0, 0, 0, .0001) 100%) !important;
                }
            </style>
    <div id="Carousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="Carousel" data-slide-to="0" class="active"></li>
            <li data-target="Carousel" data-slide-to="1"></li>
            <li data-target="Carousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_41.png" class="img-responsive">
            </div>
            <div class="item">
                <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_45.png" class="img-responsive">
            </div>
            <div class="item">
                <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_49.png" class="img-responsive">
            </div>
        </div>
        <a class="left carousel-control" href="#Carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#Carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

my controller is 

'use strict';

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

here is my app.js



    angular
      .module('myhApp', [
        'ngAnimate',
        'ngCookies',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'ngTouch',
        'ui.bootstrap'
      ])
      .config(function ($routeProvider) {
        $routeProvider
          .when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
          })
          .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'AboutCtrl'
          })
          .otherwise({
            redirectTo: '/'
          });
      });

I am not sure whats causing it. Any help will be appreciated

Autolycus

unread,
Oct 14, 2014, 1:06:26 AM10/14/14
to ang...@googlegroups.com

** Some findings recently **

ok I did some digging around and found out that I have to have carousel in the dom for directive (as the error indicates). When I add carousel, the error goes away but my carousel doesnt work anymore and looks wonky as well.

Here is the change that I made to html

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

here is how it looks and you can see there is an extra arrow in the cats face. I am not sure whats going..any help will be apprecitaed


Reply all
Reply to author
Forward
0 new messages