current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 6 down vote favorite
2

i have used jQuery slider in my project in which i am loading images using angular. My current view looks like this;

        <div id="slides">
            <div class="slides_container">
                <a href="" data-ng-repeat="image in gallery">
                    <img data-ng-src="{{image.imageUrl}}" width="919" height="326" alt="" />
                </a>
            </div>
        </div>

the controller;

blogApp.controller("HomeController", ['$scope', '$resource', function ($scope, $resource) {
    var basePath = '/api/',
        FrontGallery = $resource(basePath + 'gallery?culture=en-US'),

    $scope.gallery = FrontGallery.query();
}]);

And the jQuery slider code (to make it a slider. I'm using this plugin http://archive.slidesjs.com/)

$(document).ready(function () {
    $('#slides').slides({
        preload: true,
        preloadImage: '/content/images/theme/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: true
    });
});

When, i try this code, my all images are loaded from database (debugged it through firebug) but jQuery slider isn't applying the animation or sliding effect to it
And when i remove the data-ng-repeat="image in gallery and use Some static content i.e images, i get the sliding effect back.
What's the problem here. I think Angular is manipulating some how my DOM. That's why i'm getting this problem whenever i put i.e use some angular attributes on my slider.
Note: i have the same issue with jQuery news i.e jQuery InnerFade plugin http://medienfreunde.com/lab/innerfade/
Here is how the innerFade is used;

<h1>
    <img src="/content/images/theme/hotnews.png" alt="" />Hot News</h1>
<ul id="news">
    <li class="ng-repeat:headline in news">
        <span class="ng-bind:headline.description"></span>
        <a href="#" title="Read More">» more</a>
    </li>
</ul>

and the controller;

var HotNews = $resource(basePath + 'article/hotnews?culture=en-US');
$scope.news = HotNews.query();

How do i fix these problems?
Update 2: Here is my routes;

// declare a module
var blogApp = angular
    .module('blogApp', ['ngResource', 'ngSanitize'])
    .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        //$locationProvider.html5Mode(true);
        //configure the routes
        $routeProvider
            .when('/', {
                // list the home page
                templateUrl: "tmpl/home.html",
                controller: "HomeController"
            })
            .when('/article/:id', {
                // access custom param
                foo: "hello world",
                // list the home page
                templateUrl: "tmpl/article.html",
                controller: "ArticleController"
            })
            .when('/404', {
                template: '<h1>404 Not Found!</h1>'
            })
            .otherwise({ redirectTo: '/404' });
    }]);

Solution #1: Temporary, (As @Jason Goemaat answered) works for me. So, here is what i have done. I didn't create any directive but straightly i injected the $timeout to my controller and then i did the following;

$timeout(function () {
    jQuery('#news').innerfade({
        animationtype: 'slide',
        speed: 750,
        timeout: 2000,
        type: 'random',
        containerheight: '1em'
    });
    jQuery('#slides').slides({
        preload: true,
        preloadImage: 'image/theme/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: true
    });

}, 100);

And it did work for both i.e for Slider and for InnerFade

share|improve this question
    
Please provide a jsfiddle or similar, I would try to write a directive to fix that ;) –  Guillaume86 Jun 12 '13 at 10:15

4 Answers 4

up vote 3 down vote accepted

Angular IS manipulating your dom, the ng-repeat directive is creating the elements when it has a list to work from. Because of that you need to call .slides after angular is done creating the elements because that plugin is altering the DOM itself.

Here's a directive you can use to call $.slides on an element based on when an array has length > 0. It shows using extra attributes like 'start' to modify the call to slides too. Here it checks an array on your $scope called 'images' and calls $timeout() during the link phase to call .slidesjs() when angular is done creating the DOM. I didn't know what plugin you used so I found one called 'slidesjs that looked similar. 'Here's a plunker: http://plnkr.co/edit/4qdUctYMIpd8WqEg0OiO?p=preview

Html:

<div my-slides="images" start="4">
  <img ng-repeat="image in images" ng-src="{{image.url}}" />
</div>

Directive:

app.directive('mySlides', function() {
  var directive = {
    restrict: 'A',
    link: function(scope, element, attrs, ctrl) {
      scope.$watch(attrs.mySlides, function(value) {
        setTimeout(function() {
          // only if we have images since .slidesjs() can't
          // be called more than once
          if (value.length > 0) {
            $(element[0]).slidesjs({
              preload: true,
              preloadImage: '/content/images/theme/loading.gif',
              play: attrs.play || 5000,
              pause: attrs.pause || 2500,
              start: attrs.start || 1,
              hoverPause: attrs.hoverPause || true,
              navigation: { active: true, effect: "slide" }
            });
          }
        }, 1);
      });
    }
  };
  return directive;
});

One thing to note is that it still can only be called once, so if your image list gets updated it won't work. To do that you could create the content in the directive...

share|improve this answer
    
the data is comming from database like this=> FrontGallery = $resource(basePath + 'gallery?culture=en-US'); $scope.gallery = FrontGallery.query(); –  DotNet Dreamer Jun 9 '13 at 13:30
    
so, how do i put the code right here –  DotNet Dreamer Jun 9 '13 at 13:31
    
You don't need to, the call to $scope.$watch will call the function you pass whenever the value, gallery in this case, changes. –  Jason Goemaat Jun 9 '13 at 15:10
1  
I will perhaps sound like a jerk but putting jquery or DOM stuff in a controller should not be marked as a solution. You can use $timeout in directives, and if your timeout callback don't change the model (don't need angular to digest changes) you can just use setTimeout. –  Guillaume86 Jun 12 '13 at 10:13
1  
@DotNetDreamer you are both kind and fair. Best of luck in your learning, and happy Angularing! –  Fresheyeball Jun 13 '13 at 15:58
up vote 7 down vote
+50
 
 $(document).ready(function () {

is firing before angular has loaded the content onto the page. The jQuery slider script should only be activated after angular has loaded the content. Part of the problem here is that angular does not provide a callback for $digest so you don't have an event to listen for.

The content load -> event callback -> ui build, while common in jQuery and standard javascript thinking, its not part of the angular mentality. Luckily angular has an insanely powerful method for handling this problem.

What you need is to turn the jQuery slideshow script into an angular directive. Then it will become part of the angular process space and get instantiated as a part of the angular digest cycle.

Something like 

   <div id="slides" my-slideshow >
        <div class="slides_container">
            <a href="" data-ng-repeat="image in gallery">
                <img data-ng-src="{{image.imageUrl}}" width="919" height="326" alt="" />
            </a>
        </div>
    </div>

Good luck!

Happy example time using innerfade (I have not tested this yet, will do ASAP). First your application must declare an angular module if it doesn't already. ng-app="myModule". http://docs.angularjs.org/api/angular.module

(make sure your controller is attached as well!)

Now you can declare a directive on that module. Which is super cool.

angular.module('myModule').directive("innerFade", function () {
   var res = {
     restrict : 'C',
     link     : function (scope, element, attrs) {
           scope.$watch(attrs.innerFade, function(){             
               element.innerfade({
                  speed: 'slow',
                  timeout: 1000,
                  type: 'sequence',
                  containerheight: '1.5em'
               });
           });
        }
     };
  return res;
});

The way this works is pretty simple. The $watch function will monitor the part of scope containing your data. When that changes (including initialization), it will fire the innerfade jQuery function on the element with the directive. We are also passing 'C' to the restrict argument so this custom directive will be a class only directive (I noticed you seem to like that).

 <ul class="inner-fade:innerData" >
      <li class="ng-repeat:fadeItem in innerData">{{fadeItem}}</li>
 </ul>

Now all you have to do is bind the data to $scope.innerData in your controller (bind it any way you like including ajax), and it will just work. You can even change the data on $scope.innerData and it will update with full jQuery glory.

share|improve this answer
    
I can transform it into a directive, but I don't have the time right now to do the work and test it for delivery as a completed code. Plus it better to just learn how the angular ecosystem works anyway. It should not be too hard, and more than worth knowing. –  Fresheyeball Jun 3 '13 at 15:53
    
@DotNetDreamer if you end up going with the custom directive approach, don't forget to accept this answer. –  Fresheyeball Jun 3 '13 at 16:05
    
yes, absolutely :D –  DotNet Dreamer Jun 3 '13 at 16:48
    
Hey, so I noticed you opened up a bounty on this one. Whats up? Did the custom directive direction not work out for you? –  Fresheyeball Jun 10 '13 at 4:36
    
no dear, the problem is i don't understand the directives completly. I tried different directives aproach but it didn't work –  DotNet Dreamer Jun 10 '13 at 4:39
up vote 1 down vote

A few thoughts
1) My guess is that there is something sequentially wrong with your main app page. Do you have jQuery include after angularjs? I assume you are using ng-repeat directive?

2) change $ to jQuery

3) place document.ready script in main page ... also consider replacing it with 

 window.onload=function(){}

I am sure I can debug if you can show code for main page as well as the view.

share|improve this answer
    
this is working but in Firefox, Chrome, when i press the Ctrl+f5 key. However, when i simply Refresh the browser (without ctrl+f5), then it's not working. And in IE it doesn't work at all –  DotNet Dreamer Jun 9 '13 at 13:18
    
And also, if i come back from another route, the behavior isn't applied –  DotNet Dreamer Jun 9 '13 at 13:28
    
i put alert("It's loaded!"); inside the window.onload, i don't see any alert when i come back fron another route. –  DotNet Dreamer Jun 9 '13 at 13:40
    
Regarding IE - try adding this line in the header: id="ng-app". Anyway,lets cut to the chase and get this thing done for you! Give me access to all the code and I will rewrite for you and provide detailed comments and explanations for future reference. –  ddeloy Jun 10 '13 at 1:37
    
that's really appreciated. but how can i send my files to you –  DotNet Dreamer Jun 10 '13 at 4:37
up vote 1 down vote

Add a directive to #slides

app.directive("slideDirective", function () {
     return function (scope, element, attrs) {
         // Dom
         element.slides({
             preload: true,
             preloadImage: '/content/images/theme/loading.gif',
             play: 5000,
             pause: 2500,
             hoverPause: true
         });
     }
}
share|improve this answer
    
i tried this and its not working –  DotNet Dreamer Jun 9 '13 at 13:23
    
Can you be more specific? This is how I implemented another jQuery script that needed a doc ready function. –  David Nguyen Jun 9 '13 at 17:18
    
i first created a directive like above and then i call it like this; <div id="slider" slide-directive>. However, i don't see any changes. I know that the best solution to this problem is directives but i'm new to angular and directives are a little far from me –  DotNet Dreamer Jun 10 '13 at 4:34
1  
You need to use a timeout so that .slides is called after angular is done manipulating the dom –  Jason Goemaat Jun 13 '13 at 20:47
    
@JasonGoemaat this is exactly what helped in my case (bxSlider-plugin) –  hgoebl Dec 10 '13 at 15:38

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.