javascript - 通过 angularjs 中的服务编译指令

Question

我正在尝试通过角度服务编译指令，但不幸的是它不起作用。这个想法是在弹出窗口中显示错误。

我修改了 $exceptionHandler服务：

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

弹出服务如下所示：

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);
        }
    };
});

而且我认为硬编码$compile服务不是一个好主意（但我不知道如何以角度实现这一点）：

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

弹出指令：

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()');
        }
    };
});

可能还有其他方法可以做到这一点吗？谢谢。

Answer 1

您可以$compile直接注入到您的服务中，但您也没有完全$compile正确使用：

//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
//}]);