Added: $observe expression on allowed attributes

Author: lucor

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to `angular-wurfl-image-tailor` will be documented in this file
 
+## NEXT RELEASE
+
+### Added
+- $observe expression on all allowed attributes
+
 ## 0.9.3 - 2015-02-27
 
 ### Fixed

README.md

@@ -8,7 +8,6 @@
 
 * 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
 
@@ -30,9 +29,9 @@
 
 `<img-wit src="http://yourserver.com/image.png"></img-wit>`
 
-or if you want to use the ngSrc directive:
+or if you want to use interpolation:
 
-`<img-wit ng-src="{{myUrl}}"></img-wit>`
+`<img-wit src="{{myUrl}}"></img-wit>`
 
 where {{myUrl}} is the url of the [trusted image](https://docs.angularjs.org/api/ng/service/$sce) to load. 
 

src/angular-wurfl-image-tailor.js

@@ -1,5 +1,5 @@
 /*
- * angular-wurfl-image-tailor v0.9.3
+ * angular-wurfl-image-tailor
  * Authors: Luca Corbo (https://github.com/lucor)
  * (c) 2014 - 2015 ScientiaMobile, Inc.
  * License: MIT
@@ -24,30 +24,37 @@ angular.module('angular-wurfl-image-tailor', [])
         return {
             restrict: 'E',
             replace: false,
-            scope:{},
-            template: function(element, attributes){
-                if ('ngSrc' in attributes) {
-                    return '<div class="wit"><img ng-src="{{wit_link}}"/></div>';
-                } else {
-                    return '<div class="wit"><img src="{{wit_link}}"/></div>';
-                }
+            scope: {
+                src: '@',
+                w: '@',
+                h: '@',
+                pc: '@',
+                m: '@',
+                f: '@',
+                r: '@'
+            },
+            template: function (element, attributes) {
+                return '<div class="wit"><img ng-src="{{wit_link}}"/></div>';
             },
             link: function (scope, element, attributes) {
-                var srcAName = 'ngSrc' in attributes ? 'ngSrc' : 'src';
                 scope.wit_link = '';
 
-                attributes.$observe(srcAName, function (src) {
-                    if(!src) {
-                        scope.wit_link = '';
+                var allowedAttributes = ['w', 'h', 'pc', 'm', 'f', 'r'];
+
+                scope.$watchCollection('[src, w, h, pc, m, f, r]', function (values, oldValues) {
+
+                    var src = values.shift();
+                    if (!src) {
                         return;
                     }
 
                     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]);
+                    angular.forEach(allowedAttributes, function (attribute, index) {
+                        if (values[index]) {
+                            wit_link_pieces.push(attribute + '_' + values[index]);
                         }
                     });
+
                     wit_link_pieces.push(src);
                     scope.wit_link = wit_link_pieces.join('/');
                 });

test/unit/directiveSpec.js

@@ -18,7 +18,7 @@ describe("Unit: Testing angular directive for WURFL Image Tailor", function() {
         scope.$digest();
 
         expect(elt.html()).to.be.a('string');
-        expect(elt.html()).to.be.equal('<div class="wit"><img src=""></div>');
+        expect(elt.html()).to.be.equal('<div class="wit"><img ng-src=""></div>');
     });
 
     it('should work as an element with image source', function () {
@@ -27,7 +27,7 @@ describe("Unit: Testing angular directive for WURFL Image Tailor", function() {
         scope.$digest();
 
         expect(elt.html()).to.be.a('string');
-        expect(elt.html()).to.be.equal('<div class="wit"><img src="//wit.wurfl.io/http://test.com/image.jpg"></div>');
+        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 image source and param attribute', function () {
@@ -36,7 +36,7 @@ describe("Unit: Testing angular directive for WURFL Image Tailor", function() {
         scope.$digest();
 
         expect(elt.html()).to.be.a('string');
-        expect(elt.html()).to.be.equal('<div class="wit"><img src="//wit.wurfl.io/w_200/http://test.com/image.jpg"></div>');
+        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 work as an element with ngSrc directive', function () {