1

Hi everyone I am doing a custom directive... It apparently works correctly but an image is not shown... I let you see my directive

.directive('rhBanner', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        templateUrl: '/partial_views/directives/templates/banner.html',
        scope: {
            rhTitle: '@title',
            rhImgSrc: '@img'
        },
        controller: function () { }
    };
})

Here the template:

<div class="tg-banner tg-haslayout parallax-window" data-appear-top-offset="600" data-parallax="scroll" data-image-src="{{ rhImgSrc }}">
    <h1>{{ rhTitle }}</h1>
</div>

Here the HTML it produce (I think the HTML is correct):

<div class="tg-banner tg-haslayout parallax-window ng-isolate-scope" data-appear-top-offset="600" data-parallax="scroll" data-image-src="images/page-banner-img/img-01.jpg" title="Chi Siamo" img="images/page-banner-img/img-01.jpg">
    <h1 class="ng-binding">Chi Siamo</h1>
</div>

If I copy and past that HTML directly in the page, everything works correctly, so the img-src path is correct! But perhaps I am wrong somewhere.. As you can see the title is replicated both in the H1 element and in the DIV element... is it strange, no?

Thank you

Simone
  • 2,304
  • 6
  • 30
  • 79
  • I'm confused.. does the div tag has an img src attribute? shouldn't your template have a img tag to render the img url? – rmjoia Jan 23 '16 at 15:53
  • the div tag as data-image-src attribute.. I think it's like to set a background.. the html template is not mine and I cannot change it – Simone Jan 23 '16 at 16:12
  • didn't knew about it.. did you see this post? seems to mention the issue about the background image [Using HTML data-attribute to set CSS background-image url](http://stackoverflow.com/questions/15734546/using-html-data-attribute-to-set-css-background-image-url) – rmjoia Jan 23 '16 at 16:14
  • I found it... I think is an attribute of parallx.js http://pixelcog.github.io/parallax.js/ – Simone Jan 23 '16 at 16:26
  • 1
    I think you may need to run the initializer with javascript to have the plugin render the directive – alfcho Jan 23 '16 at 17:57
  • 1
    Thank you, you are right... I have modified my directive adding a function at `compile` time... and adding the following line of code: `$(element).parallax({ imageSrc: attrs.img });` – Simone Jan 24 '16 at 11:51

0 Answers0