如何合并外部模板

Question

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

我完成了所有步骤，但我无法弄清楚如何正确完成最后一步：

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

任何帮助都会很棒。感谢

Answer 1

如果你看source file on the github page，你可以看到他的意思。您可以通过字符串'angular-advanced-searchbox.html'设置模板网址，该字符串是同一文件夹中html文件的相对路径，也可以通过参考templateUrl按属性attr.templateUrl进行设置。当您在html文件中调用指令时，这将是一个字符串集，如<nit-advanced-searchbox template-url="templatUrlString'/>

Answer 2

它基本上意味着您可以创建自己的模板（使用您自己的样式和结构）而不是默认模板。怎么样？

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

您可以使用更改此模板结构（但您应该保留模块需要运行的指令）并使用它来代替默认模板，方法是使用<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文档以了解详情。还有关于模板的tutorial。