AngularJS-$templateCache未定义_Angularjs_Angularjs Templates

AngularJS-$templateCache未定义

angularjs

AngularJS-$templateCache未定义,angularjs,angularjs-templates,Angularjs,Angularjs Templates,我试图在AngularStrap popover中加载模板文件，但是使用$templateCache时遇到问题。我似乎比其他SO问题后退了一步，因此这似乎是双重问题在API文档之后，我在结束标记之前添加了一个。当我在页面上使用时，我什么也得不到。如果我尝试使用console.log（$templateCache.get（“popoverTemplate.html”））我会得到“$templateCache未定义”，这让我认为我错过了一个关键步骤。然而，我在文档或其他问题中找不到如何做编辑：

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

在API文档之后，我在结束标记之前添加了一个

。当我在页面上使用

时，我什么也得不到。如果我尝试使用

console.log（$templateCache.get（“popoverTemplate.html”））

我会得到“$templateCache未定义”，这让我认为我错过了一个关键步骤。然而，我在文档或其他问题中找不到如何做

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

(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);
    }]);
})();

使用模板脚本标记。您必须将其插入到angular应用程序中。它位于具有

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>

或

编辑

不要用相同的名称注册两个控制器，因为这样会用最后一个控制器覆盖第一个控制器

(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;
        });
    }]);


})();

小补充：虽然实现目标的方法很少，比如用

标签包装整个html等等，但我发现对我来说最好的方法是将

$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);
    })
});

希望这有帮助

你必须在你想使用它的地方注入服务<代码>函数（$templateCache）。脚本模板必须在angular应用程序中，所有内容都在我的

标记中。注入服务会破坏控制器的其余部分，但它确实传递了模板（我可以在控制台中看到）。我已经在问题中添加了控制器代码，您能解释一下我应该如何设置服务注入，而不破坏控制器的其余部分吗？您正在用最后一个控制器覆盖第一个控制器如果我合并它们，第一个控制器将不再工作。我应该制作一个新的控制器来加载模板吗？或者我可以组合它们，但我不知道如何组合？找到它，不知道必须注入所有函数的参数，但当我这样做时，它就工作了。非常感谢你！

(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;
        });
    }]);


})();

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);
    })
});