Question

目前AngularUI正在从此位置加载模板：

template/tabs/tab.html

我正在尝试使用其他位置。我可以从JS文件中加载模板，但我不想将我的HTML保存在JS文件中。

我从这里找到了一个很好的例子：Can you override specific templates in AngularUI Bootstrap?

angular.module("TemplateModule", []).run(["$templateCache", "$http", function ($templateCache, $http) {
    $templateCache.put("template/tabs/tab.html", "<div></div>");
    $templateCache.put("template/tabs/tabset.html", "<div></div>");
}]);

在这里你可以看到，我正在放置2个模板，它就像这样。

但我希望从例如work/files/tabs/tab.html

加载模板

我在考虑这样的事情......伪代码

$templateCache.put("template/tabs/tab.html", $http.get("work/files/tabs/tab.html"));

有什么建议吗？

Answer 1

$http 的 get() 方法不会直接返回获取的数据，但会返回“包含两个$ http的承诺具体方法：成功与错误“。所以，接近它的一种方法是：

angular.module('TemplateModule', [])
       .run(['$templateCache', '$http', function ($templateCache, $http) {
    var templates = ['tabs/tab.html', 'tabs/tabset.html', 'something/else.html'];
    var fetchTemplate = function(tmpl) {
        $http.get('work/files/' + tmpl)
             .success(function(data, status, headers, config) {
                 $templateCache.put('template/' + tmpl, data);
             })
             .error(function(data, status, headers, config) {
                 $templateCache.put('template/' + tmpl,
                                    '<div>ERROR FETCHING TEMPLATE</div>');
             });
    };
    templates.forEach(fetchTemplate);
}]);

从其他位置加载AngularUI模板

1 个答案: