Vladyslav Havrylenko Vladyslav Havrylenko - 5 months ago 15
AngularJS Question

How to define in JS when AngularJS finished compiling his view?

I need to call some JQ plugin for elements defined in AngularJS View template, so when I will call, for example

$(function() {
$( "#selectable" ).selectable();
});


It will not working because
id="selectable"
will be visible after AngularJS finished its compiling. Insert this code inside controller wrong idea (did it).

Answer

You should use a directive

angular.module('module').directive('my-selectable', function(){
    return {
        link: function(scope, element, attrs) {
            $(element).selectable();
        }
    }
});

and in your view

<select my-selectable>
...
</select>

I haven't tested but should work

I recommend the directive but if you want to detect when view is loaded if you are using ui-router

$rootScope.$on('$viewContentLoaded', function(){
    $('selector').selectable();
});

Just have in mind that this code will loaded every time the state has change