Html文件作为AngularJS指令中Bootstrap popover中的内容

Question

我有一个Angular指令来处理Bootstrap popovers,如下面的代码所示.在我的指令中,我将弹出窗口内容设置为HTML字符串,我认为这很难看.我想做的是使用"template.html"文件而不是HTMLstring.通过这种方式,我可以使用相同的指令和不同的模板文件,具体取决于我想要显示的popover类型.无论如何,那是我的计划.

那么,我如何以最好的方式从我的template.html加载html代码并使用它而不是下面的AngularJs指令中的HTMLstring？

app.directive('mypopover', function ($compile) {

var HTMLstring = "<div><label class='control-label' style='color: rgb(153, 153,153)'>Search</label>&nbsp;&nbsp;"+"<input placeholder='Search assignment' ng-model='searchText' type='text' class='form-control'> <br>"+"<label class='control-label' style='color: rgb(153, 153, 153)'>Select an assignable</label>"+"<p ng-repeat='p in projects | filter:searchText'ng-click='createEvent(user.id,date)'>"+"{{p.title}}</p></div>";

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

Answer 1

一个快速的解决方案是使用带有内联模板的templateCache:

内联模板:

<script type="text/ng-template" id="templateId.html">
      This is the content of the template
</script>

JS:

app.directive('mypopover', function ($compile,$templateCache) {

    var getTemplate = function (contentType) {
        var template = '';
        switch (contentType) {
            case 'user':
                template = $templateCache.get("templateId.html");
                break;
        }
        return template;
    }

DEMO

如果需要加载外部模板,则需要使用ajax $ http手动加载模板并放入缓存中.然后您可以使用$templateCache.get以后检索.

$templateCache.put('templateId.html', YouContentLoadedUsingHttp);

示例代码:

var getTemplate = function(contentType) {
    var def = $q.defer();

    var template = '';
    switch (contentType) {
      case 'user':
        template = $templateCache.get("templateId.html");
        if (typeof template === "undefined") {
          $http.get("templateId.html")
            .success(function(data) {
              $templateCache.put("templateId.html", data);
              def.resolve(data);
            });
        } else {
           def.resolve(template);
        }
        break;
    }
    return def.promise;
  }

DEMO