如何在 visualforce 页面中引用 angularjs 模板文件？答案

【问题标题】：How can I reference angularjs template files within a visualforce page?如何在 visualforce 页面中引用 angularjs 模板文件？
【发布时间】：2014-02-20 19:45:55
【问题描述】：

我正在创建一个 Visualforce 插件，允许我将数据添加到客户和商机页面。我添加的数据很容易遵循 SPA 的模型，因此我决定在我的 Visualforce 插件中使用 AngularJS。

到目前为止，当我只使用“帐户”页面时，一切正常——我能够只添加文本/ng-模板脚本以在应用程序中呈现我的特定视图，并且只编辑一个文件。

现在，我正在扩展插件以在机会页面上工作；插件的正面部分实际上需要完全相同相同的代码才能在商机页面和帐户页面上呈现。

我首先尝试找到某种方法在 Apex 中呈现局部视图，以便我可以将所有显示逻辑放在一个文件中；这并不理想，而且似乎没有办法做到这一点。

然后，我尝试使用链接到包含我的角度页面模板的 StaticResource html 文件，但由于某种原因（尽管为它们获取了 url），我无法链接到它们；我认为 Salesforce 根本不允许我以这种方式链接到静态资源。

我如何准确地使用模板文件以便不必复制/粘贴我的所有代码，一次是在 AccountController 的 visualforce 页面中，一次是在我的 OpportunityController 的 visualforce 页面中？

【问题讨论】：

标签： angularjs salesforce visualforce apex

【解决方案1】：

我最近写了一个帖子reference AngularJS templates within VisualForce。

我已经提到了三种方法：

1.将模板用作单独的 VisualForce 页面 (VFP)。

然后您可以将 then 引用为templateUrl: "/apex/MyDirective",。此方法允许您在模板中使用apex 标签，但渲染可能会很慢。

2。使用模板作为 VisualForce 组件。

创建一个apex:component，其中包含<script type="text/ng-template" id="myDirective">...</script> 代码。然后，将您的组件添加到apex:page，例如<c:Template />。现在您可以通过 id 引用它：templateUrl: "myDirective",。

3。使用模板作为静态资源。

创建一个静态资源，其中将包含您的 HTML 模板，例如Templates。现在您有两个选择：使用 <base> 元素或全局 javascript 变量。

1) 将基础定义为：<base href="{!URLFOR($Resource.Templates, '')}" /> 并引用您的模板文件：template: '/myDirective.html',

2) 创建全局变量：

<script>
  window.RESOURCE_ROOT = "{!URLFOR($Resource.Templates, '')}";
</script>

并将其用作：templateUrl: RESOURCE_ROOT + '/MyDirective.html'

我正在使用静态资源方法，但请注意，您将无法在这些模板中使用 apex 标记。

【讨论】：

【解决方案2】：

不确定您是如何尝试实现部分的，但我建议使用 apex:include 标签来包含一个包含您想要复制的内容的 visualforce 页面。

其他选项是创建一个apex:component，其中包含模板并可以接收参数以加载选择性内容。

【讨论】：