javascript - $templateCache 在指令中未定义，尽管我在 $http 调用中设置了 `{cache: $templateCache}`

Question

我有两个 html 页面，snippet1.html & snippet2.html .我想在我的指令中使用它们。因为我要使用单个指令添加多个模板。

我通过在 <script> 中添加 html 模板来尝试这个东西标记并给出 type="text/ng-template"像下面这样给他们。

<script type="text/ng-template" id="snippet1.html">
    <div>Here is Snippet one</div>
</script>

<script type="text/ng-template" id="snippet2.html">
    <div>Here is Snippet two</div>
</script>

然后我使用 $templateCache.get('snippet1.html') .此实现工作正常。

但在我的例子中，我需要从 html 本身加载它们，所以我决定通过 ajax 加载模板并制作 $http cache: $templateCache

Working JSFiddle

运行 block

myApp.run(['$templateCache','$http', function($templateCache, $http){ 
  $http.get('snippet1.html',{ cache : $templateCache }); 
  $http.get('snippet2.html',{ cache : $templateCache }); 
}]);

但是在我的 Controller 里面 $templateCache.get('snippet1.html')未定义。

我的问题是，为什么当我在 <script>' tag & Why it don't work when I html inside 中声明模板时它仍然有效？ $模板缓存 while making $http` ajax 调用？

Plunkr With Problem

谁能帮我解决这个问题？或者我在代码中遗漏了任何内容。

帮助将不胜感激。谢谢。

Answer 1

这是一个有趣的问题，我可以提供一个有趣的解决方法以及我对正在发生的事情的看法。我认为可能存在更好的解决方案，但找到这样的解决方案也被证明是一个挑战。尽管如此，我认为主要问题只是您的 console.log($templateCache.get('snippet1.html'))正在返回 undefined因为你的 $http.get 存在竞争条件先不解决。

检查 $templateCache 的 API ，我找不到任何有用的方法来了解模板何时通过 ajax 请求解析。要查看简单问题，请在指令中运行此命令以查看有关当前存储在 $templateCache 中的一些基本信息。

console.log($templateCache.info())

结果为

Object {id: "templates", size: 0}

为了观察问题的核心，在指令中运行相同的 JS，但超时

setTimeout(function() {
    console.log($templateCache.info())
}, 1000);

结果为

Object {id: "templates", size: 2}

很有趣，所以它们就在那里……但是现在要处理它们是一个挑战。我精心设计了以下解决方法，至少可以暂时为我们提供一些帮助。注入(inject) $q和 $rootScope进入你的.run如此运作

myApp.run(['$templateCache', '$http', '$q', '$rootScope', function($templateCache, $http, $q, $rootScope){ 
    $q.all([
        $http.get('snippet1.html',{ cache : $templateCache }),
        $http.get('snippet2.html',{ cache : $templateCache }) 
    ]).then(function(resp){
        $rootScope.templateCache = resp
    })
  }]
); 

检查这个，你会注意到我放置了一个任意的 var在我们的 $rootScope因此 $rootScope.templateCache为了放置 $watch在我们的指令中。然后在我们的指令中，让我们调用我们的 $templateCache当我们知道 $rootScope.templateCache 上有一个值时, 表示 $q服务兑现了我们的 promise

link: function(scope, element, attrs) {
    scope.$parent.$parent.$watch('templateCache', function(n, o) {
        if(n) {
            element.append($compile($templateCache.get('snippet1.html')[1])(scope));
        }
    });
}

嘿，看!我们的模板指令已正确呈现。看起来很古怪scope.$parent.$parent是因为在这个指令中，我们隔离了我们的 scope现在需要爬上一些梯子才能获得在 $rootScope 上定义的值.

我希望我们能找到更简洁更简洁的方法吗？当然!但是，希望这能确定发生这种情况的原因，以及目前启动和运行的可能方法。下面提供了工作 plunker。

Plunker Link

编辑

这是解决这个问题的完全不同的方法，它涉及手动引导

var providers = {};

var $injector = angular.injector(['ng']);

var myApp = angular.module('myApp', []);

$injector.invoke(function($http, $q, $templateCache, $document) {
    $q.all([
        $http.get('snippet1.html',{ cache : $templateCache }),
        $http.get('snippet2.html',{ cache : $templateCache }) 
        ]).then(function(resp){
            providers.cacheProvider = $templateCache;
            angular.bootstrap($document, ['myApp']);
        });
    });

myApp
.controller('test',function() {
})
.directive('myTemplate', function ($templateCache, $compile) {
    return {
        restrict: 'EA',
        scope: {
            snippets: '='
        },
        link: function(scope, element, attrs) {
            element.append($compile(providers.cacheProvider.get('snippet1.html')[1])(scope));
        }
    };
});

Updated Plunker