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>

您好，当我使用单独的页面时，我的使用bootstrap的轮播工作正常。但是当我将它包含在我的索引页面中时它无法正常工作。我觉得我的所有幻灯片都是活跃的，这就是为什么它显示所有图像。请告诉我如何解决这个问题。我已经花了两天时间。谢谢以下代码段正在运行，但当我在div中使用ng-include时>标记并在另一个html中将其设置为停止工作.. 请帮忙

Answer 1

我面临同样的问题，花大约3个小时才能得到正确答案。

在控制器中加载数据后，只需在控制器中添加以下行：

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

这是我的工作代码：

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

Answer 2

我认为你遇到的问题与那个人相同：Directives inside ng-include

ng-include创建一个新范围。

您可以尝试写：

$scope.myInterval = {value: 50000};

并使用

<carousel interval="myInterval.value">

作为修复，因为对象和原始继承不会以相同的方式工作。

指令和范围继承非常复杂，您可以查看上面的答案以获取详细信息

我的旋转木马不工作只在我使用ng-include时。否则它的工作

2 个答案: