Added support for the ngSrc directive

Author: lucor

README.md

@@ -8,6 +8,7 @@
 
 * Add the img-wit directive
 * Enable out of the box support for the [WIT URLs](http://wurfl.io/documentation/wit-getting-started.php) to download more images in parallel.
+* Allow use of the [ngSrc directive](https://docs.angularjs.org/api/ng/directive/ngSrc)
 
 ## Usage
 
@@ -29,6 +30,12 @@
 
 `<img-wit src="http://yourserver.com/image.png"></img-wit>`
 
+or if you want to use the ngSrc directive:
+
+`<img-wit ng-src="{{myUrl}}"></img-wit>`
+
+where {{myUrl}} is the url of the [trusted image](https://docs.angularjs.org/api/ng/service/$sce) to load. 
+
 ## Examples
 
 Check the [WURFL Image Tailor Documentation](http://wurfl.io/documentation/wit-directives.php) for the list of available settings.

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-wurfl-image-tailor",
   "description": "An AngularJS directive for WURFL Image Tailor (WIT)",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "main": "./src/angular-wurfl-image-tailor.js",
   "authors": [
     "Luca Corbo (https://github.com/lucor)"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-wurfl-image-tailor",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "An AngularJS directive for WURFL Image Tailor (WIT)",
   "author": "Luca Corbo (https://github.com/lucor)",
   "maintainers": [

src/angular-wurfl-image-tailor.js

@@ -1,7 +1,7 @@
 /*
- * angular-wurfl-image-tailor v0.9.0
+ * angular-wurfl-image-tailor v0.9.1
  * Authors: Luca Corbo (https://github.com/lucor)
- * (c) 2014 ScientiaMobile, Inc.
+ * (c) 2014 - 2015 ScientiaMobile, Inc.
  * License: MIT
  */
 
@@ -25,13 +25,24 @@ angular.module('angular-wurfl-image-tailor', [])
             restrict: 'E',
             replace: false,
             scope:{},
-            template: '<div class="wit"><img src="{{wit_link}}"/></div>',
+            template: function(element, attributes){
+                if (attributes['ngSrc']) {
+                    return '<div class="wit"><img ng-src="{{wit_link}}"/></div>';
+                } else {
+                    return '<div class="wit"><img src="{{wit_link}}"/></div>';
+                }
+            },
             link: function (scope, element, attributes) {
                 var wit_link_pieces = [witUrls.get()];
-                var src =  attributes['src'];
+                var src;
+                if (attributes['ngSrc']) {
+                    src = attributes['ngSrc'];
+                } else {
+                    src = attributes['src'];
+                }
                 if (!src) return;
                 angular.forEach(attributes['$attr'], function(attr) {
-                    if (attr != 'src') {
+                    if (attr != 'src' && attr != 'ng-src') {
                         wit_link_pieces.push(attr + '_' + attributes[attr]);
                     }
                 });

test/unit/directiveSpec.js

@@ -5,9 +5,10 @@ describe("Unit: Testing angular directive for WURFL Image Tailor", function() {
     beforeEach(module('angular-wurfl-image-tailor'));
 
     beforeEach(inject(
-        ['$compile','$rootScope', function($c, $r) {
+        ['$compile','$rootScope', '$sce', function($c, $r, $sce) {
             compile = $c;
             scope = $r;
+            sce = $sce;
         }]
     ));
 
@@ -38,4 +39,23 @@ describe("Unit: Testing angular directive for WURFL Image Tailor", function() {
         expect(elt.html()).to.be.equal('<div class="wit"><img src="//wit.wurfl.io/w_200/http://test.com/image.jpg"></div>');
     });
 
-});
+    it('should work as an element with ngSrc directive', function () {
+        var elt = angular.element('<img-wit ng-src="http://test.com/image.jpg"></img-wit>');
+        compile(elt)(scope);
+        scope.$digest();
+
+        expect(elt.html()).to.be.a('string');
+        expect(elt.html()).to.be.equal('<div class="wit"><img ng-src="//wit.wurfl.io/http://test.com/image.jpg" src="//wit.wurfl.io/http://test.com/image.jpg"></div>');
+    });
+
+    it('should work as an element with ngSrc directive and a trusted resource', function () {
+        scope.myUrl = sce.trustAsResourceUrl('http://test.com/image.jpg');
+        var elt = angular.element('<img-wit ng-src="{{myUrl}}" w="200"></img-wit>');
+        compile(elt)(scope);
+        scope.$digest();
+
+        expect(elt.html()).to.be.a('string');
+        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>');
+    });
+
+});