angularjs directive not working with dynamic content

Question

Hello I have create an angular directive to add a bakcground and make it width equals to height(1:1) square div

app.directive('backImg', function($timeout){
return function(scope, element, attrs){
    $timeout(function(){
            var url = attrs.backImg;
            console.log(attrs);
            console.log("after printing attrs");
            if (url == null || url == ""){
                    url="/web/header.png";
            }
            element.css({
                    'height' :  element[0].offsetWidth,
                    'margin-bottom' : '20px',
                    'background-image': 'url(' + url +')',
                    'background-size' : 'cover',
                    'background-repeat': 'no-repeat',
                    'background-position': 'center center',
            });
    });
    };
});

This directive is working fine with the elements that appears when the page is first time loaded

....SOME HTML

 <div back-img="{{group.images[0].path}}"> </div> ---> Working fine

....MORE HTML

This time is not working, the only diference is that it been show if sessionSelected is true.

<div class="row" id="active-session" ng-show="userCtrl.sessionSelected">
    <div back-img="{{group.images[0].path}}"> </div> ---> Not working Working
</div>

Can you please help me figure this out, please

EDIT I looks like the directive is been called while it is not showed (ng-show) and for that reason group.images[0].path is null.

how can I do to call directive when visible??. I think it will be the way

Here you can see that the element is been populated with the correct img path when displayed

FIREFOX DEBUG

<div back-img="/web/uploads/56f7f53a2b82bbf75033559a/nKj0DMZrVt.jpeg"></div>

Zamboney · Accepted Answer · 2016-04-03 12:27:58Z

1

you are created the <div back-img="{{group.images[0].path}}"> and use the element[0].offsetWidth when the element is on display:none css (because of the ng-show=true attribute). so in order for this to work you need to change the ng-show to ng-if. that way when you change the flag to true it draw the html all over again and then this will call to the link function in the directive

EDIT

you can always use the $watch function that check for update in the url and when it occurs trigger the changes

app.directive('backImg', function($timeout){
  return function(scope, element, attrs){
    scope.$watch(attrs.backImg,function(){
            var url = attrs.backImg;
            console.log(attrs);
            console.log("after printing attrs");
            if (url == null || url == ""){
                    url="/web/header.png";
            }
            element.css({
                    'height' :  element[0].offsetWidth,
                    'margin-bottom' : '20px',
                    'background-image': 'url(' + url +')',
                    'background-size' : 'cover',
                    'background-repeat': 'no-repeat',
                    'background-position': 'center center',
            })
        })
    };
});

edited Apr 3, 2016 at 12:27

answered Apr 3, 2016 at 12:02

Zamboney

2,00712 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Noel Carcases Over a year ago

The element actually is showed but is showed the image I have set if url is null if (url == null || url == ""){ url="/web/header.png"; <- That is the image that is been show on the div } the only thing is failling is that the div has the wrong image.

Zamboney Over a year ago

you need to see if that argument is set in the proper way. you can do it by debugging your code on that line and understand it better. it this isn't helping you can always add you code here (the controller function)

Noel Carcases Over a year ago

I looks like the directive is been called while it is not showed (ng-show) and for that reason group.images[0].path is null. how can I do to call directive when visible??

Noel Carcases Over a year ago

The arguments is been set when element is displayed ... se question edits

Zamboney Over a year ago

you may want to use the $watch function on the attrs.backImg

|

Collectives™ on Stack Overflow

angularjs directive not working with dynamic content

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related