Einfache Angular Slideshow: kann kein Klickereignis am Eingabetyp = "Radio" auslösen

Question

Also kann ich dies in weniger als zehn Zeilen Code anders machen, aber ich möchte nur die Angular Way. Irgendwelche Vorschläge und Methoden sind willkommen.

Ich habe einige Bilder und eine Reihe von Radioeingabetasten, die die hier gezeigt wird, zu steuern:

CSS:

.slide { 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; 
    opacity: 0; 
} 

.slide.showSlide { 
    opacity: 1; 
} 

HTML:

<section class="slideshow" ng-controller="sliderCtrl"> 
    <div ng-repeat="slide in slides | orderObjectBy:'sort'" sort-order="{{slide.sort}}" class="slide" ng-class="{ 'showSlide': $index == selectedIndex }"><img ng-src="{{slide.src}}" alt="{{slide.alt}}" /></div> 
    <aside id="slideControls" ng-model="slides.input"> 
     <input ng-repeat="slide in slides | orderObjectBy:'sort'" name="{{slide.alt}}" class="slideCtrl" type="radio" ng-click="slideShow($index)" /> 
    </aside> 
</section> 

Controller:

app.controller('sliderCtrl', function ($scope, $http, $element, $interval) { 
    $http.get('data/slides.json') 
    .success(function(data, status, headers, config) { 
     $scope.slides = data; 
     $scope.selectedIndex = 0; 
     $scope.slideShow = function ($index) { 
      console.log($index); 
      $scope.selectedIndex = $index; 
     } 
     var theShow; 
     $scope.$watch("slides.input", function(value) { 
      var i = 1, 
       iMax = $element.children(0).children('.slideCtrl').length - 1, 
       elements = $element.children(0).children('.slideCtrl'); 
      theShow = $interval(function() { 
       $scope.slideShow(i); 
       if (i<iMax) i++; 
       else i = 0; 
      }, 3000); 
     }); 
    }) 
    .error(function(data, status, headers, config) { 
     console.log(data+', '+status+', '+headers+', '+config); 
    }); 
}); 

EDITION:

SO habe ich die Slideshow wie jemand vorgeschlagen, aber es erreicht immer noch nicht, was ich vorhabe. Anstatt die ng-click-Funktion aufzurufen, brauche ich sie auch, um mein Optionsfeld auszuwählen, und brauche es, um das Click-Ereignis auf dem Optionsfeld selbst auszulösen. Ich war in der Lage, die Elemente zum Ziel, die Länge zu bekommen, aber wenn ich versuchte:

$scope.slideShow(i).triggerhandler('click'); 

ich zurück >>> Kann nicht lesen Eigenschaft ‚triggerHandler‘ undefinierter

Answer 1

Du Schleife durch alle der Schieber steuert jeder zweite. Und wahrscheinlich möchten Sie jeden Schieberegler einmal pro Sekunde durchlaufen. Das ist wahrscheinlich, was Sie tun möchten:

var counter = 0; 
var sliderOn = $interval(function() { 
    var tar = angular.element('#slideControls'); 
    counter = (counter < tar.children.length) ? counter+1 : 0;   
    console.log(tar.children[counter]); 
    // Click code goes here I suppose 
}, 1000);