Fatal编程技术网
  • javascript/
  • Javascript ng include中包含的角度指令模板

Javascript ng include中包含的角度指令模板

javascript html angularjs templates

Javascript ng include中包含的角度指令模板,javascript,html,angularjs,templates,Javascript,Html,Angularjs,Templates,我想打包并发布一个angular模块，其中包括一系列指令和html模板 我正在尝试将指令的所有html模板捆绑到一个html文件中，并使用ng include包含该html文件。然后，模块中的各种指令将使用这些模板 因此，这3个组成部分是： 一些标准指令 function Directive1($compile, $rootScope) { return { restrict: "E", scope: { options: "="

我想打包并发布一个angular模块，其中包括一系列指令和html模板

我正在尝试将指令的所有html模板捆绑到一个html文件中，并使用ng include包含该html文件。然后，模块中的各种指令将使用这些模板

因此，这3个组成部分是：

一些标准指令

function Directive1($compile, $rootScope) {
    return {
        restrict: "E",
        scope: {
            options: "="
        },
        templateUrl: "directiveTemplate1.html",
        link: function (scope, element, attrs) {}
    }
}

function Directive2($compile, $rootScope) {
    return {
        restrict: "E",
        scope: {
            options: "="
        },
        templateUrl: "directiveTemplate2.html",
        link: function (scope, element, attrs) {}
    }
}
包含我的模板的html文件，位于/path/to/template.html

<script type="text/ng-template" id="directiveTemplate1.html">
    <div> Template ONE </div>
</script>


<script type="text/ng-template" id="directiveTemplate2.html">
    <div> Template TWO </div>
</script>
最后是html页面，它将所有内容连接在一起

<html>
    <body>
    <directive1/>

     <directive2/>
    </body>

    <ng-include src="'/path/to/templates.html'">
</html>
有可能这样做吗

我想这样做，这样我就可以将angular模块发送给第三方，他们只需要为模块包含一个缩小的js文件和一个包含所有局部视图的html文件。我不能在指令中内联我的模板html，因为部分相当大

我认为angular会在页面加载时包含并解析templates.html文件，并将模板插入templateCache中，供指令稍后使用——当指令的templateUrl被异步解析时

我已经试过了，但指令似乎找不到模板

有什么想法吗？

参考Angular bootstrap库。他们将模板嵌入到JS文件本身中。
在这个链接上选择CreateaBuild选项，选择任何模块并下载它。检查.tpl.js文件的源代码

更好的选择是将HTML模板打包到JS文件本身，这样您的模块附带了HTML已经可用的模板，无需下载任何内容

其思想是，Angular通过$templateCache中的路径检查模板的存在，如果模板已经存在，或者已经手动下载或放置在那里，那么它只会立即返回模板的内容。你需要类似的行为。顺便说一下，type=text/ng template的脚本指令也做了同样的事情——只是将其innerHTML放入模板缓存中

要实现这一点，您可以手动将模板放入，或者（更方便的是）使用类似的工具自动化此任务，这些工具可用于所有主要构建系统，如gulp和grunt。

Hmm是的，这会起作用，但这不是一个角度解决方案。在angular中，如果不将所有html放在js中，就无法包含来自另一个文件的模板吗？谢谢你的建议-如果我找不到用Angular做这件事的方法，我会看一看。你可以随心所欲地做，但我建议使用模板缓存。我的模板很大，将它们放在js中会使它们无法维护-您不会维护缩小的模板。关键是，您可以通过构建任务打包模板，在开发过程中，您可以使用常规的HTML模板文件。但一旦你构建了这个项目，它就会缩小js文件，并将模板打包到js中。是的，我们希望在angular中找到一个解决方案，但这似乎是一个不错的选择——Thankstats ui-bootstrap-custom-tpls-0.13.4.js。如果你下载了手风琴包，请检查代码从213行到231行。谢谢Manesh-现在找到了。他们正在将模板html嵌入js并将其注入templateCache中-我希望不要这样做，因为我的模板很大，而将它们放入js将使它们无法维护此技术将帮助您缓存模板并提供更好的性能。这就是AngularUI使用它的原因。另外，将其作为依赖项注入要比将其保存在单独的HTML中容易得多。