Question

我正在创建一个Visualforce插件，允许我将数据添加到Account and Opportunity页面。我添加的数据很容易遵循SPA的模型，所以我决定在我的Visualforce插件中使用AngularJS。

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

现在，我正在扩展插件，以便在机会页面上工作;插件的前端部分字面上需要在机会和帐户页面上呈现完全相同的代码。

我首先尝试在Apex中找到一些渲染局部视图的方法，这样我就可以将所有显示逻辑放在一个文件中;它并不理想，似乎没有办法做到这一点。

然后，我尝试使用链接到包含我的角度页面模板的StaticResource html文件，但出于某种原因（尽管获得了它们的URL），我无法链接到它们;我认为Salesforce不会让我以这种方式链接到静态资源。

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

Answer 1

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

我提到了三种方法：

<强> 1。使用模板作为单独的VisualForce页面（VFP）。

然后你可以引用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定义为：<base href="{!URLFOR($Resource.Templates, '')}" />并引用您的模板文件：template: '/myDirective.html',

2）创建全局变量：

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

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

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

Answer 2

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

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

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

2 个答案: