从文件加载$ templateCache

时间:2014-12-25 17:19:19

标签: angularjs templates

我一直无法从$ templateCache加载模板。

我如何将模板放入$ templateCache:

var app = angular.module('anglober', ['anglober.controllers', 'anglober.services', 'anglober.directives']).run(function ($templateCache, $http) {
    $http.get('anglober/js/invitation/invitationModal.tpl.html', {cache: $templateCache});
    $http.get('anglober/js/modal/ajaxModal.tpl.html', {cache: $templateCache});
    $http.get('anglober/js/ajaxLoader/ajaxLoader.tpl.html', {cache: $templateCache});
    $http.get('anglober/js/modal/modalContent.tpl.html', {cache: $templateCache});
    $http.get('anglober/js/modal/simpleModal.tpl.html', {cache: $templateCache});
    $http.get('anglober/js/mog/topMogs.tpl.html', {cache: $templateCache});

我如何加载它们:

angular.module('anglober.directives').directive('topMogs', ['$templateCache', function ($templateCache) {
return {
    restrict : 'E',
    template: $templateCache.get('topMogs.tpl.html')
    //Tried this too
    // templateUrl: 'topMogs.tpl.html'
};
}]);

在我的网络浏览器标签中,我可以看到在页面加载时加载的模板。

但是在调用我的指令时出现以下错误:

One of template or templateUrl options is required.

我做错了什么?

由于

1 个答案:

答案 0 :(得分:9)

这个旧线程的微小补充:尽管实现目标的方法很少,但我发现对我来说最好的方法是在我的应用程序的每个指令中添加$templateCache逻辑。这样我可以避免使用任何外部软件包,例如grunt angular-templates,这很棒 - 但对我的应用程序来说有点过分。

angular.module('MyApp')
.directive('MyDirective', ['$templateCache', function($templateCache) {
    return {
        restrict: 'E',
        template: $templateCache.get('MyTemplate'),
        controller: 'MyController',
        controllerAs: 'MyController'
    };
}]).run(function($templateCache, $http) {
    $http.get('templates/MyTemplate.html').then(function(response) {
        $templateCache.put('MyTemplate', response.data);
    })
});

希望这有帮助!