angularjs custom directives value change

Question

I have the following code (it does not work on jsfiddle but it does if you save it as index.html)

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
    <script>
      var photos = [
        {"url":"http://archive.vetknowledge.com/files/images/guinea-pig---tan.jpg"},
        {"url":"http://www.rfadventures.com/images/Animals/Mammals/guinea%20pig.jpg"}
      ];

      angular.module('app', [])

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

      .controller('PhotosCtrl', function($scope){
        $scope.photos = photos;
        $scope.flags = {
          modalOpen: false,
          imgSrc: null
        };

        $scope.doModal = function(url){
          if(url != false) {
            $scope.flags.imgSrc = url;
            $scope.flags.modalOpen = true;
          } else $scope.flags.modalOpen = false;
        };

        $scope.sourcifier = function(url){
          var temp = document.createElement('a');
          temp.href = url;

          if(temp.hostname.substring(0, 4) == 'www.')
            return temp.hostname.substring(4);
            else return temp.hostname;
        };
      });
    </script>
  </head>
  <body>
    <div ng-controller="PhotosCtrl">

      <div ng-repeat="photo in photos" class="item">
        <img ng-src="{{photo.url}}" ng-click="doModal(photo.url)">
        <p><a ng-href="{{photo.url}}" target="_blank">{{sourcifier(photo.url)}}</a></p>
      </div>

      <div ng-show="flags.modalOpen" ng-click="doModal(false)">
        <div ng-background="{{flags.imgSrc}}">my background should be of the clicked image</div>
      </div>

    </div>
  </body>
</html>

That basically loads the images form the array "photos" and displays them. What I am trying to achieve is to use a custom created ng-background directive to change the background image of a div to the clicked image src.

It does not work at all! Now, I amsure that flags.imgSrc is correct, since if I use ng-src on an img tag, it does work. It seems more like that the custom directive ng-background does not "refresh" the value of that flag.

Any ideas why and how this could be fixed? Thanks in advance.

Ivan Chernykh · Accepted Answer · 2013-09-16 05:24:01Z

2

You need to $watch for flags.imgSrc changes:

.directive('ngBackground', function(){
     return function(scope, element, attrs){
          var url = attrs.ngBackground;

          scope.$watch(url,function(n,o){
             if(!n) return;

             element.css({
              'background-image': 'url(' + n + ')',
              'background-size' : 'cover'
            });

          },true);

        };
    });

Take a look: http://plnkr.co/edit/JXmG7L?p=preview

UPDATE: But the proper way to listen to element' attributes' changes is $observe method:

    attrs.$observe("ngBackground",function(n,o){ /* same handler code */ });

Updated plunk: http://plnkr.co/edit/fOOCOd?p=preview

edited Sep 16, 2013 at 5:24

answered Sep 15, 2013 at 11:04

Ivan Chernykh

42.2k13 gold badges136 silver badges149 bronze badges

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

1 Comment

john smith Over a year ago

just out of curiosity... what's n and o? new and old?

Collectives™ on Stack Overflow

angularjs custom directives value change

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related