Angular - JQuery inside ng-view doesn't work

Question

i'm new on Angular, help me please!

I have a page and inside it i included a view:

<div class="row">
    <div class="col-md-12">
        <ui-view></ui-view>
    </div>
</div>`

In the part included there are some jquery plugins, like Revolution Slider and other stuffs. The problem is that all jquery plugins inside ui-view don't work.

I searched the reason and i know that jquery library must be included before the Angular's one, and i did it, but nothing in changed.

What can i do to run all jquery scripts correctly?

Answer 1

The reason for this is that all the jQuery plugins you use try to initiate themselves as soon as the page loads. But Angular populates <ng-view/> some time after that. The solution is to initiate the plugins manually. The angular way for that is to create your own directive for each 'special' element and to apply the corresponding jQuery plunging in it's link function. Lets use a calendar for example:

app.directive('calendar', function(){

    return {
        template: '<div class="calendar"></div>',
        link: function(scope, el, attrs, ctrl){

            $(el).makeCalendar();
        }
    }
})

This way, you may use <calendar></calendar> in you HTML to create calendars.

EDIT

Thank you for your answer, but maybe i didn't understand...

For example, on document.ready i do this:

$doc.ready(function() {
    var $sliderRange = $('#slider-range');
    var $amount = $('#amount');
    if ($sliderRange.length) {
    // apply range slider
    $sliderRange.slider({
        range: true,
        min: 0,
        max: 3000,
        values: [0, 2600],
        slide: function(event, ui) {
        $amount.val('€' + ui.values[0] + ' - €' + ui.values[1]);
    }
    });
    $amount.val('€' + $sliderRange.slider('values', 0) + ' - €' + 
    $sliderRange.slider('values', 1));
    }
 });

How can i do this with directive?

EXAMPLE:

app.directive('slider', function(){

    var defaults = {
        range: true,
        min: 0,
        max: 3000,
        values: [0, 2600],
    };

    return {
        template: '<div></div>',
        replace: true,
        scope: {
            options: '=',
            value: '='
        },
        link: function(scope, el, attrs, ctrl){

            // merge options with defaults
            var opts = ng.extend({}, defaults, scope.options);

            // set initial value
            opts.values = scope.value = scope.value || [0, 0];

            // watch for changes and update the scope's value
            opts.slide = function(event, ui){
                scope.value = ui.values;
                scope.$apply();
            };

            // apply the jquery plugin with the options
            $(el).slider(opts);
        }
    }
})

Now you use it like that:

<slider value="sliderValue"></slider>
<p>Result: €{{sliderValue[0]}} - € {{sliderValue[1]}}</p>

And you may modify the options like that:

<slider value="sliderValue" options="{max: 100}"></slider>