1

AngularStrap ポップオーバーでテンプレート ファイルを読み込もうとしていますが、$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);
    }]);
})();
4

2 に答える 2

4

テンプレート スクリプト タグを使用するには . 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>

アプリケーションのコンポーネントでテンプレートを取得する場合は、それを使用する場所にサービスを注入する必要があります。

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

または

controller('FooCtlr', FooCtrl);

FooCtrl ($templateCache) {};

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

編集

2 つのコントローラーを同じ名前で登録しないでください。最初のコントローラーが最後のコントローラーでオーバーライドされるためです。

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


})();
于 2016-01-28T09:49:36.020 に答える
0

ちょっとした追加: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);
    })
});

お役に立てれば！

于 2016-05-01T13:01:53.797 に答える