Added $observe expression on 'ngSrc'

Change img when ngSrc value has changed

Author: ishi

src/angular-wurfl-image-tailor.js

@@ -20,7 +20,7 @@ angular.module('angular-wurfl-image-tailor', [])
             }
         };
     })
-    .directive('imgWit', function (witUrls) {
+    .directive('imgWit', ['witUrls', function (witUrls) {
         return {
             restrict: 'E',
             replace: false,
@@ -33,21 +33,20 @@ angular.module('angular-wurfl-image-tailor', [])
                 }
             },
             link: function (scope, element, attributes) {
-                var wit_link_pieces = [witUrls.get()];
-                var src;
-                if (attributes['ngSrc']) {
-                    src = attributes['ngSrc'];
-                } else {
-                    src = attributes['src'];
-                }
-                if (!src) return;
-                angular.forEach(attributes['$attr'], function(attr) {
-                    if (attr != 'src' && attr != 'ng-src') {
-                        wit_link_pieces.push(attr + '_' + attributes[attr]);
-                    }
+                var srcAName = attributes['ngSrc'] ? 'ngSrc' : 'src';
+
+                if(!attributes[srcAName]) return;
+
+                attributes.$observe(srcAName, function (src) {
+                    var wit_link_pieces = [witUrls.get()];
+                    angular.forEach(attributes['$attr'], function (attr) {
+                        if (attr != 'src' && attr != 'ng-src') {
+                            wit_link_pieces.push(attr + '_' + attributes[attr]);
+                        }
+                    });
+                    wit_link_pieces.push(src);
+                    scope.wit_link = wit_link_pieces.join('/');
                 });
-                wit_link_pieces.push(src);
-                scope.wit_link = wit_link_pieces.join('/');
             }
         }
-    });
+    }]);

test/unit/directiveSpec.js

@@ -58,4 +58,15 @@ describe("Unit: Testing angular directive for WURFL Image Tailor", function() {
         expect(elt.html()).to.be.equal('<div class="wit"><img ng-src="//wit.wurfl.io/w_200/http://test.com/image.jpg" src="//wit.wurfl.io/w_200/http://test.com/image.jpg"></div>');
     });
 
+    it('should change when ngSrc directive variable change', function () {
+        scope.myUrl = sce.trustAsResourceUrl('http://test.com/image.jpg');
+        var elt = angular.element('<img-wit ng-src="{{myUrl}}"></img-wit>');
+        compile(elt)(scope);
+        scope.$digest();
+        scope.myUrl = sce.trustAsResourceUrl('http://test.com/image2.jpg');
+        scope.$digest();
+
+        expect(elt.html()).to.be.a('string');
+        expect(elt.html()).to.be.equal('<div class="wit"><img ng-src="//wit1.wurfl.io/http://test.com/image2.jpg" src="//wit1.wurfl.io/http://test.com/image2.jpg"></div>');
+    });
 });