AngularJS $scope in factory

Question

I have the following situation, I use a jQuery preload plugin.

angular.module('app')
    .factory('Preloader', function Preloader(Videos) {


        return {
            start: function() {

                $.html5Loader({
                    filesToLoad: Videos.query(),
                    onBeforeLoad: function() {},
                    onComplete: function() {
                      //$scope.loaded = done
                    },
                    onElementLoaded: function(obj, elm) {},
                    onUpdate: function(percentage) {
                      //$scope.precentage = precentage
                    }
                });

            }
        }

    });

I build a factory where I wrap the plugin.

In my controller I have something like:

angular.module('playlist')
    .controller('Ctrl', function($scope, Preloader, Videos) {

        Preloader.start();        

And on the HTML I have a loading screen which I want to hide with ng-if="!loaded".

Can someone explain me how to link the $scope.loaded from the factory to the $scope.loaded inside my controller?

Answer 1

Directive is the right way to go in this case and not factory. This way, you can expose the loaded variable using the directive $scope .

If you would like to use factory anyway, expose the loaded variable as a member of the factory so you can watch for changes in the controller.

EDIT

To call start you can use events or two-way binding (which is my favorite)