Merge pull request #1 from aeonflux/master

Simplified directive. Fixed problem when multiple flags were inserted in...

README.md

@@ -20,8 +20,7 @@ The directive takes country iso code and creates a thumbnail of the country's fl
 
 4. Start drawing flags
   ```html
-  <span flag="'us'" flag-size="f16"></span>
-  ```
+  <flag country="us" size="16"></flag>
 
 * 32x32 thumbnails are also supported, just add the following line to your head:
 
@@ -31,5 +30,5 @@ The directive takes country iso code and creates a thumbnail of the country's fl
 
 And and specify the wanted sizein your html:
   ```html
-  <span flag="'us'" flag-size="f32"></span>
+  <flag country="us" size="32"></flag>
   ```

src/directives/ng-flags.js

@@ -5,21 +5,26 @@
  * Author: asafdav - https://github.com/asafdav
  */
 angular.module('ngFlag', []).
-  directive('flag', ['$parse', function($parse) {
+  directive('flag', function() {
     return {
-      template: '<span class="{{ flagSize }}"><span class="flag {{ country }}"></span></span>',
+      restrict: 'E',
       replace: true,
+      template: '<span class="f{{ size }}"><span class="flag {{ country }}"></span></span>',
+      scope: {
+        country: '@',
+        size: '@'
+      },
       link: function(scope, elm, attrs) {
         // Default flag size
-        scope.flagSize = 'f16';
+        scope.size = 16;
 
-        attrs.$observe('flag', function(value) {
-          scope.country = scope.$eval(value).toLowerCase();
+        scope.$watch('country', function(value) {
+          scope.country = angular.lowercase(value);
         });
 
-        attrs.$observe('flagSize', function(value) {
-          scope.flagSize = value;
+        scope.$watch('size', function(value) {
+          scope.size = value;
         });
       }
     };
-  }]);
+  });