在AngularJS指令中，将下面的内容作为Bootstrap popover的内容： Html文件

10 浏览
0 Comments

在AngularJS指令中，将下面的内容作为Bootstrap popover的内容： Html文件

我有一个Angular指令来处理Bootstrap的弹出框，如下所示。在我的指令中，我将弹出框的内容设置为一个HTML字符串，我认为这样很丑陋。

我想要做的是使用一个"template.html"文件，而不是HTML字符串。这样的话，我将能够根据想显示的弹出框类型使用不同的模板文件来使用相同的指令。这是我的计划。

那么，如何以最佳方式从我的template.html文件中加载HTML代码，并在下面的AngularJs指令中使用它代替HTML字符串呢？

app.directive('mypopover', function ($compile) {
    var HTMLstring = "  "+" "+""+"
"+"{{p.title}}";
    var getTemplate = function (contentType) {
        var template = '';
        switch (contentType) {
            case 'user':
                template = HTMLstring;
                break;
        }
        return template;
    }
    return {
        restrict: "A",
        link: function (scope, element, attrs) {
            var popOverContent;
            if (scope.user) {
                var html = getTemplate("user");
                popOverContent = $compile(html)(scope);                    
            }
            var options = {
                content: popOverContent,
                placement: "right",
                html: true,
                date: scope.date
            };
            $(element).popover(options);
        },
        scope: {
            user: '=',
            date: '='
        }
    };
});

0