My carousel not working only when i am using ng-include. else its working

Question

var AccordionApp = angular.module("Carouselapp", ['ui.bootstrap']);
function CarouselDemoCtrl($scope) {
 
  $scope.myInterval = 50000;
  $scope.slides = [
     { image1: 'IMAGES/AngularJS.jpg', image2: 'IMAGES/BigData.jpg' },
    { image1: 'IMAGES/Mainframe.png', image2: 'IMAGES/DOTNET.png' },
    { image1: 'IMAGES/AngularJS.jpg', image2: 'IMAGES/BigData.jpg' },
    { image1: 'IMAGES/Mainframe.png', image2: 'IMAGES/DOTNET.png' }
  ];
}

<!Doctype html />
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="Scripts/ui-bootstrap-tpls.min.js"></script>
    <script src="example.js"></script>
    <link href="CSS/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div >
  <carousel interval="myInterval">
    <slide ng-repeat="slide in slides" active="slide.active">
    <table>
    <tr>
    <td>
     <img ng-src="{{slide.image1}}" style="margin:auto;"> 
    </td>
    <td><img ng-src="{{slide.image2}}" style="margin:auto;">
    </td>
    </tr>
    </table>
     
           
    </slide>
  </carousel>  
</div>
</body>
</html>

Hi, My carousel using bootstrap is working fine when i am using a seperate page for it. but when i am including it in my index page its not working. I feel all my slides are active thats why its showing all the images. Pls let me know how to solve this. I have spent 2 days on this already. Thanks The below snippet is working but when i using ng-include in div> tag and plave this in another html it stops working.. Pls help

I am very new to angular i might be doing some silly mistake. — Vatsala Agrawal, Oct 11 '14 at 11:29

score 0 · Answer 1 · answered Oct 02 '16 at 15:25

I face the same issue and spend around 3 hours to get the correct answer.

Just add following line in your controller after loading you data in your controller:

$('#carousel').carousel('cycle');

Here is my working code:

Service.GetData('home').then(function (response) {
   $scope.data = response.data.Data;
   $('#carousel').carousel('cycle');
  }, function (error) {
     $scope.error = error.message;
  });

score -1 · Answer 2 · edited May 23 '17 at 10:27

-1

I think you got the same problem than that guy : Directives inside ng-include

The ng-include create a new scope.

You can try to write :

$scope.myInterval = {value: 50000};

and use

<carousel interval="myInterval.value">

as a fix, because object and primitive inheritance dont work the same way.

Directive and scope inheritance are quite complicated, you can check the answer above for detail

edited May 23 '17 at 10:27

Community

1
1

answered Oct 11 '14 at 11:38

Boris Charpentier

3,515
25
28

Thanks for the reply. But this is not working either. Its not even loading the images now. – Vatsala Agrawal Oct 11 '14 at 12:17
What do you mean by setting the value by variable, why cannot you put the value directly in your html – Ali Adravi Oct 02 '16 at 15:11
You can but the goal was to get back the info in the parent scope, hence the variable. – Boris Charpentier Oct 02 '16 at 15:14

My carousel not working only when i am using ng-include. else its working

2 Answers2