Angular-UI-Bootstrap-Karussell nicht funktioniert

Möchte ich ein Karussell mit angular und Bootstrap, aber es funktioniert einfach nicht. Ich kann nicht sehen, das Karussell und ich sehe eckig ist brackett.

In anderen Worten, mein Fazit ist:

Hallo {{name}} das sind Ihre Fotos:
Schieben Sie {{$index+1}}

Dies ist mein index.html

<!doctype html>
<html ng-app="app">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <script src="script.js"></script>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div>
        Write your name here <input type="text" ng-model="name">
        Hi {{name}} Those are your photos:  
        <div ng-controller="CarouselDemoCtrl" id="slides_control">
            <div>
                <uib-carousel interval="myInterval">
                    <uib-slide ng-repeat="slide in slides" active="active" index="$index">
                        <img ng-src="{{slide.image}}" style="margin:auto;">
                        <div class="carousel-caption">
                            <h4>Slide {{$index+1}}</h4>
                        </div>
                    </uib-slide>
                </uib-carousel>
            </div>
        </div>
    </div>  
</body>
</html>

und das ist mein javascript script.js

var myApp = angular.module('app', ['ui.bootstrap']);
myApp.controller('CarouselDemoCtrl', CarouselDemoCtrl);
function CarouselDemoCtrl($scope){
    $scope.myInterval = 3000;
    $scope.slides = [
                     {
                       image: 'http://lorempixel.com/400/200/'
                     },
                     {
                       image: 'http://lorempixel.com/400/200/food'
                     },
                     {
                       image: 'http://lorempixel.com/400/200/sports'
                     },
                     {
                       image: 'http://lorempixel.com/400/200/people'
                     }
                   ];
});

BEARBEITEN ich habe die codes oben nach, was die Antwort unten sagt. Es funktioniert immer noch nicht

Sie nie wirklich definieren einen controller. Siehe docs.angularjs.org/guide/controller
Sie haben bereits diesem Beispiel die Arbeit in einem codepen als erstes Ergebnis der Google - codepen.io/Fabiano/pen/LACzk Sie die Kopie eingefügt, wo einige, und es funktioniert nicht
als str, sagte aktualisieren Sie den code mit der app.controller('CarouselDemoCtrl', CarouselDemoCtrl); vor der Funktion
angular-ui.github.io/bootstrap/#/carousel verwenden Sie geeignete Richtlinien
Antwort N. V. Prasad, Der link ist genau das, wo ich nahm es aus. Ich verstehe nicht, warum es funktioniert nicht auf mich

InformationsquelleAutor | 2016-03-03

angular-ui-bootstrap angularjs

Sehen Sie ein Beispiel arbeiten in plunker link unten.

Plunker

<uib-carousel interval="myInterval">
    <uib-slide ng-repeat="slide in slides" active="active" index="$index">
         <img ng-src="{{slide.image}}" style="margin:auto;">
          <div class="carousel-caption">
               <h4>Slide {{$index+1}}</h4>
          </div>
    </uib-slide>
</uib-carousel>

Sind Sie mit den falschen Richtlinien für die angular-ui.

Auch, Sie sind nicht der Definition der controller richtig:

var app = angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', CarouselDemoCtrl);

UPDATE

Komplette funktionierende Beispiel, auch abgespeichert als html-Datei auf Ihrem system.

<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">    
<script type="text/javascript">
var app = angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', CarouselDemoCtrl);

function CarouselDemoCtrl($scope){
  $scope.myInterval = 3000;
  $scope.noWrapSlides = false;
  $scope.activeSlide = 0;
  $scope.slides = [
    {
      image: 'http://lorempixel.com/400/200/'
    },
    {
      image: 'http://lorempixel.com/400/200/food'
    },
    {
      image: 'http://lorempixel.com/400/200/sports'
    },
    {
      image: 'http://lorempixel.com/400/200/people'
    }
  ];
}
</script>
</head>
<body>
<div>
    Write your name here <input type="text" ng-model="name">
    Hi {{name}} Those are your photos:  
    <div ng-controller="CarouselDemoCtrl" id="slides_control">
        <div>
            <uib-carousel interval="myInterval" active="activeSlide">
                <uib-slide ng-repeat="slide in slides" index="$index">
                    <img ng-src="{{slide.image}}" style="margin:auto;">
                    <div class="carousel-caption">
                        <h4>Slide {{$index+1}}</h4>
                    </div>
                </uib-slide>
            </uib-carousel>
        </div>
    </div>
</div>  
</body>
</html>

Ich änderte den code (Siehe die Frage oben), aber es funktioniert immer noch nicht
Sind Sie immer irgendwelche java-Skript Fehler? Können Sie zu replizieren, in einem plunker? Auch versuchen die $scope.active=0 im controller. Und die ng-controller sollte festgelegt werden, auf die Eltern div um korrekt zu arbeiten. Es funktioniert, weil Eckige versucht, die Eigenschaft durch gehen bis zum rootview.
Ok. Ich replizieren, die es in einer plunker und es funktioniert... Also was kann das problem sein?
Es kann eine Reihe von Gründen. Sie müssen sagen, wie Sie sind Abspritzen die Seite, und wenn es irgendwelche Fehler in der Konsole.
Ok. Dein update funktioniert. Ich danke Ihnen sehr

InformationsquelleAutor Mihail Stancescu

Problem Ist in deinem html..

<div>
    Write your name here <input type="text" ng-model="name">
    Hi {{name}} Those are your photos:  
    <div ng-controller="CarouselDemoCtrl" id="slides_control">
        <div style="height:500px;">
            <div uib-carousel interval="myInterval" active="activeSlide">
                <div uib-slide ng-repeat="slide in slides" index="$index">
                    <img ng-src="{{slide.image}}" style="margin:auto;">
                    <div class="carousel-caption">
                        <h4>Slide {{$index+1}}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Verwenden Sie Diesen Code Statt.

InformationsquelleAutor Dhiresh Budhiraja

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.