如何合并外部模板

How to incorporate an external template

本文关键字：外部 合并 何合并      更新时间：2023-09-26

>我正在尝试包含此本地源中提供的搜索框：http://dnauck.github.io/angular-advanced-searchbox/

我完成了所有步骤，但我不知道如何正确完成最后一步：

angular-advanced-searchbox 指令使用存储在 angular-advanced-searchbox.html 中的外部模板。将其托管在页面可访问的位置，并设置 template-url 属性。请注意，url参数可以是作用域变量，也可以是硬编码字符串。

任何帮助都会很棒。谢谢

它基本上意味着您可以创建自己的模板(使用自己的样式和结构(而不是默认值。如何？

  • 这是模块使用的默认模板：https://github.com/dnauck/angular-advanced-searchbox/blob/master/src/angular-advanced-searchbox.html

您可以使用 change 此模板结构(但您应该保留模块需要运行的指令(并使用它而不是默认模板，方法是用 <script type="text/ng-template" id="myNewTemplateName.html"></script> 包装它：

<script type="text/ng-template" id="myNewTemplateName.html">
    <!-- PUT HERE YOUR NEW TEMPLATE -->
</script>

然后你需要向模块介绍你的模板：

<nit-advanced-searchbox
    ng-model="searchParams"
    parameters="availableSearchParams"
    template-url="myNewTemplateName.html" <!-- NOTE THE TEMPLATE DECLARATION --> 
    placeholder="Search...">
</nit-advanced-searchbox>
还有其他

方法可以在应用中包含和重用模板 - 请参阅$templateCache文档以了解详细信息。还有这个关于模板的教程。

如果你在github页面上查看源文件，你就会明白他的意思。您可以通过字符串'angular-advanced-searchbox.html'设置模板 url，该字符串是同一文件夹中 html 文件的相对路径，也可以通过引用 attr.templateUrl 来通过属性templateUrl设置模板 url。当您在 html 文件中调用指令时，这将是一个字符串集，如<nit-advanced-searchbox template-url="templatUrlString'/>

相关文章：