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

我正在創建一個Visualforce插件，允許我將數據添加到Account和Opportunity頁面。我所添加的數據很容易遵循SPA的模型，所以我決定在我的Visualforce插件中使用AngularJS。如何在visualforce頁面中引用angularjs模板文件？

到目前爲止，當我僅使用帳戶頁面時，一切正常 - 我只能添加文本/ ng-template腳本來在應用程序中呈現特定視圖，並只編輯一個文件。

現在，我正在擴展該插件以在機會頁面上工作;插件的正面部分字面上需要在機會和帳戶頁面上呈現相同的代碼才能呈現確切的。

我試着先找到某種方法在Apex中渲染局部視圖，以便我可以將所有顯示邏輯放在一個文件中;這並不理想，似乎也沒有辦法做到這一點。

然後，我嘗試使用鏈接到包含我的角頁面模板的StaticResource html文件，但由於某種原因（儘管爲他們獲取了url），我無法鏈接到它們;我認爲Salesforce根本不會讓我以這種方式鏈接到靜態資源。

我該如何使用模板文件，以便不必複製/粘貼我的所有代碼，一次進入AccountController的Visualforce頁面，一次進入OpportunityController的Visualforce頁面？

來源

2014-02-20 Phil Barresi

不知道你是如何試圖實現一個部分，但我會建議使用apex:include標記包括一個Visualforce頁面與您想要複製的內容。

其他選項將創建一個apex:component包含模板，並可以接收參數來加載選擇性內容，例如。

來源

2014-03-26 13:51:27 geekymartian

我最近寫了一篇文章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 href="{!URLFOR($Resource.Templates, '')}" />並引用您的模板文件：template: '/myDirective.html',

2）創建全局變量：

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

，並用它作爲：templateUrl: RESOURCE_ROOT + '/MyDirective.html'

我使用靜態資源方法，但請注意，您將無法在這些模板中使用apex標記。

來源

2016-07-29 12:02:48 Frelseren

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

回答

相關問題