Use Flexslider with Angular.JS

Question

I try to manage a responsive slider with Flexslider on the front part of a website, But as I am working with Angular.js, my images does not have directly a "src" attribute specified, and Angular manage it itself with the "ng-src" attribute. And so my slider works (I can see the navigation controls), but is blank...

Any way to fix it ? Or another responsive slider library idea, that should work with Angular.js ?

#templates/detail.html
<div class='flexslider'>
    <ul class='slides'>
        <li ng-repeat='slide in project.slides'><img ng-src='{{slide}}' alt='{{project.name}}' /></li>
    </ul>
</div>

#js/app.js
'use strict';

angular.module('test', []).config([
    '$routeProvider',
    function ($routeProvider) {
        $routeProvider
            .when('/', { templateUrl: 'detail.html', controller: ProjectCtrl })
    }
]);

#js/controllers.js
'use strict';

function ProjectCtrl($scope) {
    $scope.project = {
        id: 1,
        name: 'Test',
        slides: [
            'test.png',
            'test2.png'
        ]
    };
$('.flexslider').flexslider();
};

Could you demonstrate the issue you are facing on jsfiddle or plunkr? — ganaraj, Dec 07 '12 at 13:34
Hum, it is really strange, but when I build a test project, it works perfectly, with the same code, but without the same environment (Symfony2 and Twig), so maybe my problem comes from that... But I do not understand :/ — Flo Schild, Dec 07 '12 at 15:40
I faced similiar issues when I started with angular. Its all about getting a deeper understanding of how angular works. Check out their docs and try to understand how everything works. I guess then you would be able to figure out what / where something is going wrong! — ganaraj, Dec 07 '12 at 22:51
Okay, but I do not think that it comes from Angular, because my test project is working well... I'll check again, and post an answer if I found. — Flo Schild, Dec 08 '12 at 13:00

score 1 · Accepted Answer · answered Apr 28 '13 at 21:05

1

In fact it was caused by the Twig render engine, that users the double brackets too: {{ }}

I fixed it by rendering some raw HTML using the raw filter of twig : http://twig.sensiolabs.org/doc/filters/raw.html

answered Apr 28 '13 at 21:05

Flo Schild

5,104
4
40
55

1

Also, just a friendly FYI; it's bad practice to do any DOM manipulation inside controllers. Better to move `$('.flexslider').flexslider();` into a directive instead. – GFoley83 Jun 21 '13 at 23:45

Use Flexslider with Angular.JS

1 Answers1