Compile directives via service in angularjs

Question

I'm trying to compile directive via angular service but unfortunately it doesn't work. The idea is to show errors in popups.

I've modified $exceptionHandler service:

crm.factory('$exceptionHandler', function(popup) {
    return function(exception) {
        popup.open({message: exception});
    }
});

The popup service looks like this:

crm.factory('popup', function ($document) {
    return {
        open: function (data) {
            var injector = angular.element(document).injector(),
                $compile = injector.get('$compile'),
                template = angular.element('<popup></popup>');

            // var ctmp = $compile(template.contents());
            $compile(template.contents());

            $document.find('body').append(template);
        }
    };
});

And I don't think that this was a good idea to hard code $compile service (but I haven't any ideas how to realize this in angular):

$compile = injector.get('$compile')

Popup directive:

crm.directive('popup', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: '/public/js/templates/common/popup.html',
        link: function() {
            console.log('link()');
        },
        controller: function () {
            console.log('ctrl()');
        }
    };
});

May be there are some other ways to do this? Thanks.

Answer 1

You can inject $compile directly into your service, also you're not quite using $compile correctly:

//commented alternative lines for allowing injection and minification since reflection on the minified code won't work
//crm.factory('popup', ['$document', '$compile', function ($document, $compile) {
crm.factory('popup', function ($document, $compile) {
    return {
        open: function (data) {
            var template = angular.element('<popup></popup>'),
                compiled = $compile(template);

            $document.find('body').append(compiled);
        }
    };
});
//closing bracket for alternative definition that allows minification
//}]);