1

I have been trying to do this for a while now to no avail. could you guys point me in the right direction?

I made a controller for angularjs to animate a slideshow. here's the controller:

angular.module('common').controller('VideoModalController', ['$scope', 'SessionService', 'DateTimeService',
function ($scope, SessionService, DateTimeService) {
    $scope.view = {};

    // Close the modal
    $scope.hideVideos = function () {
        $scope.$close();
    };

    //next slide
     $scope.nextSlide = function () {
        target = $('ul.triggers li.active').index();
        target === lastElem ? target = 0 : target = target+1;
        sliderResponse(target);
    };
    //prev slide
     $scope.prevSlide = function () {
         target = $('ul.triggers li.active').index();
         lastElem = triggers.length-1;
         target === 0 ? target = lastElem : target = target-1;
         sliderResponse(target);
    };
}
]);

What I'm trying to do is make my jquery work inside of it. I've tried everything I could think of got no results. here's my jquery:

<script type="text/javascript">
var triggers = $('ul.triggers li');
var videos = $('ul.videos li');
var lastElem = triggers.length - 1;
var target;

triggers.first().addClass('active');
videos.hide().first().show();

function sliderResponse(target) {
    videos.addClass('hiddenvid').fadeOut(900).eq(target).fadeIn(900).removeClass('hiddenvid');
    triggers.removeClass('active').eq(target).addClass('active');
}

triggers.click(function() {
    if (!$(this).hasClass('active')) {
        target = $(this).index();
        sliderResponse(target);
    }
});
</script>

I tried placing the jquery inside the controller file and changing the variables to $scope.Somevariable but it still didn't work. the only thing I managed to do was get the ng-click working right.

any help would be greatly appreciated. thanks

p u
  • 1,395
  • 1
  • 17
  • 30
GeneralCan
  • 305
  • 6
  • 18
  • 3
    A real answer probably requires more info, but in short, don't use jQuery inside an angular controller. Or more direct, don't do **any** dom-manipulation inside the controller! Quick reference: [“Thinking in AngularJS” if I have a jQuery background?](http://stackoverflow.com/q/14994391/697154) – Yoshi Jun 30 '15 at 07:10
  • @GeneralCan AngularJS has build-in jQLite so jquery code should work inside angular but if you want to fully use jquery you need to include jquery library into your project. – Alberto I.N.J. Jun 30 '15 at 07:14
  • 7
    The correct place for DOM manipulation is in a directive. Can you provide a Plunker (or something similar) as a demo of what you're trying to do? – jme11 Jun 30 '15 at 07:16
  • Whatever you want to do using jquery, make a javascript/jquery function (not in angularjs controller). Call that function inside angular controller, as `myfunction();` – VBMali Jun 30 '15 at 07:33
  • Hey, u guys r awesome. I was just reading about directives. Im trying to learn more about them to understand how they work.@jme11 what's a plunker? And how do I post one on here? – GeneralCan Jun 30 '15 at 07:37
  • I meant, can you provide a working or non-working demo so it's easier for people to give an answer that's on point? [Plunker](http://plnkr.co/) is a popular online tool for code sharing. [CodePen](http://codepen.io/), [JSBin](https://jsbin.com), and [JSFiddle](https://jsfiddle.net/) are also quite commonly used. You can create a streamlined demo online of what you're trying to do, then save it and post the link to it in your question. You can also try and use the snippets feature here on stackoverflow, but the other tools I mentioned are a little more robust and perhaps easier to use. – jme11 Jul 01 '15 at 05:53

0 Answers0