Load angular 1.5 component template via promise

Question

In Angular 1.5, I want to load the template via custom promise. The example code that I would like to run is

var module = angular.module("myApp", []);
module.component("component", {
template: ["$q", function ($q) {

    var defer = $q.defer();

    setTimeout(function () {
        defer.resolve("<p>Hello world</p>");
    }, 100)
    return defer.promise;
}],
controller: function () {

}
});

The reason I want to do this is to load the template from a proxy iframe.

If there is any way to provide my custom template resolver for promise that would too suffice.

Look this post http://stackoverflow.com/questions/22189298/angularjs-returning-a-promise-in-directive-template-function. It seems to be the same problem with directive. I think you can try a similar approch — Silvinus, Jun 23 '16 at 14:37

score 3 · Accepted Answer · answered Jun 24 '16 at 06:22

I solved the problem by replacing $templateRequestService of angular using decorator.

See the code example below:

module.config(["$provide", function ($provide) {

$provide.decorator("$templateRequest", [
    "$delegate", "$q", // DI specifications
    function ($delegate, $q) {

        // replace the delegate function 
        $delegate = function (tpl) {
            var defer = $q.defer();
            // convert the tpl from trustedvaluetoken to string
            if (typeof (tpl) !== "string" || !!$templateCache.get(tpl)) {
                tpl = $sce.getTrustedResourceUrl(tpl);
            }
            // make proxy call and resolve the promise;

            // Make an async call
            return defer.promise;
        }
        // return the modified delegate function
        return $delegate;
    }]);

}]);

You can use return $q.when() to avoid using defer directly. – Drag13 Jun 24 '16 at 13:15 — Drag13, Jun 24 '16 at 13:15

Load angular 1.5 component template via promise

1 Answers1