我可以用$编译的角度服务直接在templateUrl，而不是在原始的HTML或原始angular.element？ [英] Can I use $compile in an Angular service directly on a templateUrl instead of on raw HTML or a raw angular.element?

问题描述

由于下列服务，是为了创造一个对话元素（即一个模式）：

Given the following service that is meant to create a "dialog" element (i.e. a modal):

app.service('dialog', ['$document', '$compile', '$rootScope',
    function($document, $compile, $rootScope) {

        var body = $document.find('body');
        var scope = $rootScope.$new();

        this.createDialog = function() {
            var dialogElem = angular.element('<div ng-include="\'/dialog.html\'"></div>');
            $compile(dialogElem)(scope);
            body.append(dialogElem);
        };

    }
]);

可以在一个控制器中使用的，像这样：

which can be utilized in a controller like so:

$scope.someFunction = function() {
    dialog.createDialog();
};

有没有我可以使用 $编译或其他任何不具有HTML在我服务的方法吗？我真的preFER只是调用指令，从而使运行 createDialog（）立即注入一个指令到我的DOM，因此该指令负责将一新控制器和模板在一起。如果我要对此错误的方式我对建设性的想法完全开放。

Is there a way that I can use $compile or anything else to not have HTML in my service? I'd really prefer to just invoke a directive, so that running createDialog() immediately injects a directive into my DOM and thus the directive is responsible for linking a new controller and template together. If I'm going about this the wrong way I'm totally open to constructive ideas.

推荐答案

当然，你可以在这里！，你去：

Of course you can!, here you go:

app.factory('modalService', function ($document, $compile, $rootScope, $templateCache, $http) {

    var body   = $document.find('body'),
        modals = [];

    var service = {
        show: function (template, data, modal) {

            // The template's url
            var url = 'template/modal/' + template + '.html';

            // A new scope for the modal using the passed data
            var scope = $rootScope.$new();
            angular.extend(scope, data);

            // Wrapping the template with some extra markup
            modal = modal || angular.element('<div class="modal"/>');

            // The modal api
            var api = {
                close: function () {

                    modal.remove();
                    scope.$destroy();
                    modals.splice(modals.indexOf(api), 1);

                },
                replace: function (template, data) {

                    return angular.extend(api, service.show(template, data, modal));
                }
            };

            // Adding the modal to the body
            body.append(modal);

            // A close method
            scope.close = api.close;

            // Caching the template for future calls
            $http.get(url, {cache: $templateCache})
                .then(function (response) {

                    // Wrapping the template with some extra markup
                    modal.html('<div class="win">' + response.data + '</div>');

                    // The important part
                    $compile(modal)(scope);
                });

            modals.push(modal);

            return api;
        },
        showOrReplaceLast: function (template, data) {

            return service.show(template, data, modals.length > 0 ? modals[modals.length - 1] : null);
        }
    };

    return service;
});

一些注意事项：

• 您需要在某处DOM插入模式，这就是为什么$文件注入。


• 是的，你可以把模式标记离开这里。


• 记住为对话创造新的领域，并摧毁他们（$ rootScope。$新）。


• 这是一个WIP，我希望这是很清楚。

这篇关于我可以用$编译的角度服务直接在templateUrl，而不是在原始的HTML或原始angular.element？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！