Question

我正在尝试在AngularStrap popover中加载模板文件，但是我在使用$ templateCache时遇到了问题。我似乎比其他SO问题更进一步，因此这似乎是双重问题。

根据API文档，我在结束<script type="text/ng-template" id="popoverTemplate.html"></script>标记之前添加了</body>。当我在页面上使用<div ng-include="'popoverTemplate.html'"></div>时，我什么也得不到。如果我尝试使用console.log($templateCache.get("popoverTemplate.html"))，我会得到“$ templateCache未定义”，这使我认为我错过了一个至关重要的步骤。但是，我无法在文档或其他SO问题中找到如何做到这一点。

编辑：注入该服务是缺失的环节。但是，当我注入服务时，控制器的其他功能不再起作用，但是如果你注入函数的参数，则工作代码变为：

(function() {
    "use strict";
    angular.module("app").controller("managerController", ["$scope", "imageHierarchyRepository", "$templateCache", function ($scope, imageHierarchyRepository, $templateCache) {
        imageHierarchyRepository.query(function(data) {
            $scope.hierarchies = data;
        });

        var template = $templateCache.get("popoverTemplate.html");
        console.log(template);
    }]);
})();

Answer 1

使用模板脚本标记。您必须将其插入角度应用程序中。如果您不使用ng-app标记，则该元素位于具有ng-app属性的元素内或用于引导应用的元素。

<body ng-app="myapp">

  <div ng-template="'myTemplate.html'"></div>

  <script type="text/ng-template" id="myTemplate.html">
    // whate ever
  </script>
</body>

如果要在应用程序的组件上检索模板，则需要将服务注入到要使用它的位置：

controller('FooCtrl', ['$templateCache', function ($templateCache) {
  var template = $templateCache.get('myTemplate.html');
}]);

或者

controller('FooCtlr', FooCtrl);

FooCtrl ($templateCache) {};

FooCtrl.$inject = ['$templateCache'];

修改

不要注册两个具有相同名称的控制器，因为那样你用最后一个控制器覆盖第一个控制器。

(function() { "use strict"; angular.module("app").controller("managerController",["$scope", "imageHierarchyRepository", "$templateCache", function ($scope, imageHierarchyRepository, $templateCache) { var template = $templateCache.get("popoverTemplate.html"); console.log(template); imageHierarchyRepository.query(function(data) { $scope.hierarchies = data; }); }]); })();

Answer 2

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

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

希望这有帮助！

AngularJS - $ templateCache未定义

2 个答案: