AngularJS directive not changing even if scope variable have been modified

Question

Here is the directive. I think something is missing on my directive which can make it aware of the changes in the $scope.

'use strict';

 app.directive('backImg', function(){
        return function(scope, element, attrs) {
            var url = attrs.backImg;
            element.css({
                'background-image': 'url(' + url +')',
                'background-size' : 'cover'
            });
      };
 });

and here is the html

  <div back-img="{{url}}">
  </div>

in my controller, I have

$scope.url = 'image/placeholder.jpg';

Then I also have a button that changes value of $scope.url.

$scope.changeImage = function() {
    $scope.url = 'image/newimage.jpg';
}

I can see the changes in the DOM but the background image being displayed is still showing the old image which is placeholder.jpg. I noticed both urls are in the DOM after I called the changeImage() function.

<div back-img="http://localhost:9000/image/newimage.jpg" style="background-image: url(http://localhost:9000/image/placeholder.jpg); background-size: cover;">
</div>

devwannabe · Accepted Answer · 2015-06-21 02:34:10Z

1

I got it working! Woohoo! I'm learning directives!

app.directive('backImg', function() {
  return {
    restrict: 'A',
    link: function($scope, element, attrs) {
      $scope.$watch('url', function(n, o) {
        console.log('checking .....', n, o);
        if (n) {
          console.log('changing');
          element.css({
            'background-image': 'url(' + attrs.backImg + ')',
            'background-size': 'cover'
          });
        }
      });
    }
  };
});

answered Jun 21, 2015 at 2:34

devwannabe

3,2189 gold badges45 silver badges83 bronze badges

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

Collectives™ on Stack Overflow

AngularJS directive not changing even if scope variable have been modified

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related