问题标签 [angular-templatecache]

我找不到任何关于此的文档或文章。
我们在我工作的公司有 MVC 项目。
我们在它之上构建了 Angular SPA。
我们还希望它可以离线工作。
所以，我需要缓存。在 AngularJS 中找到 $templateCache 模块。
并试图实施它。由于项目是 MVC，所以我要加载到 ng-view 中的所有模板实际上都是 MVC 部分视图，我可以通过调用 {Controller}/{Action} 来加载它们。
但是在这种情况下，互联网上没有实现 $templateCache 的示例。
所有示例都展示了如何使用静态模板，例如 mytemplate.html 或字符串。这在 MVC 下不起作用。
所以，我试图弄清楚如何做到这一点，为 app.ts 写了这个：

显然这行不通。有什么建议么？谢谢。

我正在使用 Grails 3 和 AngularJS 配置文件以及Angular Toastr 插件。
当我在开发模式下运行应用程序时，一切正常，但是当我捆绑应用程序（没有缩小）时，无法再加载插件中的模板，并且出现以下错误：

我检查了捆绑的代码并找到了以下几行：

和

所以看起来模板在模板缓存中正确初始化。

我尝试在控制器中注入 $templateCache 并调用$templateCache.get("directives/toast/toast.html")它，这将返回正确的模板。

捆绑时模板未正确加载的原因可能是什么，尽管我可以使用它来访问它$templateCache.get(...)？
关于 $templateCache 的正确使用，我有什么遗漏吗？

PS：我注意到 angular-bootstrap 模板存在同样的问题

编辑我发现，当我使用绝对 templateUrls 时，一切正常，所以显然，我不完全理解相对 templateUrls 是如何工作的。
捆绑应用程序时，所有 JS 代码都连接到具有不同路径的单个文件中，这似乎会中断通过 $templateCache 的加载。现在，将所有 templateUrls 设为绝对是一个解决方案，但对于使用相对 templateUrl 且不更改其代码的插件，我无法做到这一点。

那么，任何人都可以向我解释这里实际发生了什么以及我如何解决这个问题，而无需触及插件代码？

我在访问指令上的方法和变量以对其进行测试时遇到了一些困难。我究竟做错了什么？我附上了我的指令和测试文件。我没有包括我的 karma conf，因为我知道它是正确的，这不是问题所在。

accountsearch.spec.js <-- 这是包含测试用例的文件

这是实际的指令，我尝试了很多方法来访问它的控制器，但我只是不知道我做错了什么。

当您有一个文件 app.js 和许多模块时，像下面的代码片段那样在 JavaScript 中嵌入 HTML 是不可维护的。

应用程序.js

是否可以将这 100 个 LoC 从 $templateCache.put(...) 迁移到 Html 文件中，就像我们使用 templateUrl 而不是模板一样？或者建议另一种方法来实现这一点，因为我正在失去对代码的控制。我想使用$templateCache进行快速检索。

我有一个plnkr，故事很长，但归结为我需要能够使用来自 templateCache 的图像。我尝试像这样使用ng-src来做到这一点......

然而，这不起作用，我得到......

copy_icon':1 获取https://run.plnkr.co/ZyTH7LFhPLhdQpCI/'img/help/copy_icon ' 400 ()

所以它不是试图从 templateCache 中获取它。有没有办法做到这一点？

更新

我试过了 ...

但这也不起作用

当此页面加载时$scope，以下每个方法中都包含相同的id值。self.gridData已按应有的方式填充，并且可以在selectAllClicked方法中访问。

当我离开/返回页面时，所有$scopeid 都会重新生成，因为它们应该是除了.selectAllClicked方法中的那个。在.selectClickedAll方法id中console.log($scope)是从原始页面加载的。由于self.gridData加载了新的$scope但旧$scope的被调用.selectAllClicked，所以angular.forEach永远不会触发。

这似乎（我相信）是与下面第一个元素中的 ng-table header指令相关的问题。td它正在从模板缓存中加载复选框headerCheckbox.html并存储在模板缓存中。在这里再次假设，但这似乎强制复选框绑定到原始范围，而不是重新渲染的范围。

任何想法如何强制$scope.selectAllClicked将自身应用于新渲染的$scope？

我正在使用 grunts ng-template 将 html 模板存储在 $templateCache 中。角度文档建议我可以使用这样的模板：

或像这样：

有什么区别？我真的不喜欢在每个指令/组件中注入 $templateCache 只是为了使用这个函数。这是关于性能吗？

我读过这篇文章：Angularjs 和 templateUrl 之间的性能差异有多大 ，如果我是对的，那么使用模板（而不是 templateUrl）会快一点。这是唯一的区别吗？

使用 angularjs 路由，有时我得到

但是我声明了 template/home.html inline

出乎意料的是，我不是每次都得到 404，但有时。

我已经读过这个 stackoverflow，他们记得这个规则 https://docs.angularjs.org/api/ng/service/ $templateCache

注意：包含模板的脚本标签不需要包含在文档的头部，但它必须是$rootElement（IE，具有ng-app属性的元素）的后代，否则模板将被忽略。

我已经声明了没有 ng-app 的 angularjs 应用程序，但是通过引导程序

所以我的 $rootElement 是文档。事实上，我不会每次都收到 404 错误。是否存在一些竞争条件：有时在使用我的内联模板设置 $templateCache 之前设置了 $routerProvider。

我正在使用requirejs。这可能是原因吗？

有什么帮助吗？

当我这样做时，由于某种原因，模板缓存对我来说失败了：

然后在使用 routeProvider 时

但是，如果我将密钥从“test.html”更改为“test”，它就可以工作。出于某种原因，当我将文件扩展名添加到密钥时，它很快就会失败。

我已经阅读了 $templateCache 的文档，但我仍然在努力理解如何使用 put 函数将远程模板加载到缓存中。

下面是一个例子：

虽然我的代码返回 tpl1 的 HTML 代码，但正在返回 tpl2 的路径。我的问题是：如何使用 $templatecache.put() 加载远程模板。

谢谢您的帮助。