У меня есть следующая проблема при попытке добавить загрузочную карусель ui, где я не вижу изображение, которое я вызываю js
Импортировать
<!-- <link href="resource/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet"> -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="resource/css/estilos.css" rel="stylesheet" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script type='text/javascript' src='./resource/angular-1.5.5/angular.js'></script>
<script type='text/javascript' src='./app/controllers/Gallery2.js'></script>
<script type='text/javascript' src='./resource/framework/ui-bootstrap-tpls-2.0.2.js'></script>
<script type='text/javascript' src='./resource/angular-1.5.5/angular-animate.js'></script>
HTML
<div class="span10" >
<!--Body content-->
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.Path}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.ImageID}}</h4>
<p>{{slide.Title}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
JS
angular.module('myModule', ['ngAnimate', 'ui.bootstrap']).controller('CarouselDemoCtrl',function ($scope) {
$scope.myInterval = 5000;
$scope.slides = [[
{
"ImageID": 1,
"Title": "Tulips",
"Summary": "This is summary of Tulips",
"Path": "\\resource\\img\\logo.png"
}
]];
});
Я также вижу атрибуты этого активного, интервала, обертывания, индекса:
Индекс атрибутов не разрешен
Буду признателен за вашу помощь
Вы отслеживаете id
свойства в <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
, $scope.slides
не имеют этого свойства. Вы можете отслеживать ImageId или изменять его на id. Я включил ссылку на рабочий jsFiddle, основанный на вашем примере для вас.