Force HTTP interceptor in dynamic ngSrc request

Question

I\'ve created an AngularJS application that loads images from an OAuth secured backend. My OAuth library is configured by adding an extra interceptor to the Angular $h

Answer 1

This is a little old, but thought I would add another method for finding an image w/o using an interceptor. In my case, I needed to find the image path from the rails assets pipeline.

There was a blog from Codetunes (http://codetunes.com/2014/5-tips-on-how-to-use-angularjs-with-rails-that-changed-how-we-work/) that described how they find templates. This makes use of an interceptor but doesn't work for images.

The solution I used requires you to use a model for the ng-src value. Within the model, I call a helper method from a service that utilizes the Rails.templates variable setup from the above blog article.

So, it looks like the following:

angular.module('myApp').factory('RailsAssetService', function(Rails) {

    function RailsAssetService() {

    }

    RailsAssetService.getAssetsUrl = function(url) {
        var railsUrl = Rails.templates[url];
        if (railsUrl === undefined)
            railsUrl = url;
        return railsUrl;
    }

    return RailsAssetService;
});

and in the controller:

vm.creditCardsImage = RailsAssetService.getAssetsUrl('credit-cards-logo.gif');

and in the view: