Search code examples
javascriptangularjssprocketsmiddleman

Handling assets on angularjs and middleman

I'm having a difficult time on integrating angularjs to my middleman app. I'm following the phonecatApp tutorial for angularjs and on tutorial 6 about templating and linking images. The output is fine but there's an annoying bug that's displayed on the console.

GET http://localhost:4567/images/ 404 (Not Found)

Now I read that this problem occurs when putting the angulars expression directly to the src attribute of a image element so it's suggested to put it in ng-src directive, but i'm using a helper on it and it's giving me thsi error. Here's my code:

= image_tag nil, "ng-src" => asset_path(:images, "{{phone.imageUrl}}")
Solution

  • The image_tag helper adds a src attribute in any case (see http://www.padrinorb.com/api/Padrino/Helpers/AssetTagHelpers.html#image_tag-instance_method, click 'view source'):

    # File 'padrino-helpers/lib/padrino-helpers/asset_tag_helpers.rb', line 253

def image_tag(url, options={})
  options.reverse_merge!(:src => image_path(url))
  tag(:img, options)
end

    As the image_tag internally just uses the tag helper you could achieve your result with ...

    = tag :img, "ng-src" => asset_path(:images, "{{phone.imageUrl}}")