AngularJS

Question

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

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

编辑：注入服务是缺失的 link。但是，当我注入服务时，控制器的其他功能不再起作用，但是如果您注入所有函数的参数，工作代码将变为：

(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

使用模板脚本标签。您必须将其插入到 angular 应用程序中。如果您不使用 ng-app 标签，它位于具有 ng-app 属性的元素或用于 bootstrap 应用程序的元素内。

<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 逻辑添加到每个 Angular 指令中。这样，我就可以避免使用任何外部包，例如 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 未定义

AngularJS - $templateCache is not defined

angularjs-templates