4

I am curious how people handle the angular templating engine while using visualforce.

The issue is that if you have a static resource and you use a templateUrl for a directive, or even a route. Everything essentially gets evaluated on the page, however the URL is not used with respect to the static resource, instead is used with respect to your current domain/url.

Of course you can get around this by using VisualForce pages as templates, or just throwing the html directly into the directives instead of a templateUrl.

However this has started becoming a real issue while trying to use existing Angular Modules (such as ui.bootstrap).

Are there any known solutions to this?

4

I have a hard time understanding what you are struggling with absent a concrete example.

The pattern I followed when using templates was to pass in merge values from the VisualForce Page, where I can still perform a merge, to my Static Resource within which I define directives.

VisualForce Page

(function (a) {
    "use strict";
    a.module('myApp', [])
        .constant('mergeValues', {
            template1Url: '{!URLFOR($Resource.Template1)}',
            template2Url: '{!URLFOR($Resource.Template2)}'
        );
})(angular);

Static Resource

(function (a) {
    "use strict";
    a.module('myApp')
        .directive('template1', function(mergeValues) {
            restrict: "E", templateUrl: mergeValues.template1Url
        })
        .directive('template2', function(mergeValues) {
            restrict: "E", templateUrl: mergeValues.template2Url
        })
})(angular);
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.