Fixed #8 Add jagged for jaggy directive by angular.js

CHANGELOG.md

@@ -1,11 +1,14 @@
-v0.1.17-rc.2 / Apr 26 2015
+v0.1.17-rc.3 / Apr 26 2015
 =========================
- * [`unknown`][13] :bug: Fix [#6][13A]
- * [`unknown`][13] :bug: Fix [#7][13B]
+ * [`4b8a6ee`][13] :bug: Fix [#6][13A]
+ * [`4b8a6ee`][13] :bug: Fix [#7][13B]
+ * [`unknown`][14] :lipstick: Fix [#8][14A] Add `jagged` for jaggy directive
 
-[13]: https://github.com/59naga/jaggy/commit/
+[13]: https://github.com/59naga/jaggy/commit/4b8a6ee577f8625ddfd2e492a30e36b9a8d244e1
 [13A]: https://github.com/59naga/jaggy/issues/6
 [13B]: https://github.com/59naga/jaggy/issues/7
+[14]: https://github.com/59naga/jaggy/commit/
+[14A]: https://github.com/59naga/jaggy/issues/8
 
 v0.1.17 / Apr 15 2015
 =========================

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "jaggy",
   "main": "public/jaggy.browser.js",
-  "version": "0.1.17-rc.2",
+  "version": "0.1.17-rc.3",
   "homepage": "https://github.com/59naga/jaggy",
   "authors": [
     "59naga <i59naga@icloud.com>"

lib/jaggy.angular.coffee

@@ -13,7 +13,10 @@ service.directive 'jaggy',(
   jaggy
   $compile
 )->
-  (scope,element,attrs)->
+  scope:{
+    jagged:'='
+  }
+  link:(scope,element,attrs)->
     element.css 'display','none'
 
     scope.config= jaggy
@@ -47,4 +50,6 @@ service.directive 'jaggy',(
 
         # fix animatedGif caching
         script= element.find 'script'
-        eval script.html() if script?
+        eval script.html() if script?
+
+        scope.jagged scope,element,attrs if typeof scope.jagged is 'function'

public/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <title>Document</title>
   <script src="pkgs.js"></script>
-  <script src="jaggy.browser.min.js"></script>
+  <script src="jaggy.browser.js"></script>
   <script>
     console.log(jaggy.flush());
   </script>
@@ -35,6 +35,10 @@
         var normal= jaggy.glitch===4;
         jaggy.glitch= normal? 2+~~(2*Math.random()): 4;
       };
+
+      $rootScope.rendered= function(){
+        alert('Welcome to Underground...');
+      }
     });
   </script>
   <style>
@@ -51,7 +55,7 @@ <h2>angular.js</h2>
     <img ng-src="uma.gif" jaggy alt="for Angular.js">
     <img ng-src="uma.gif" jaggy alt="for Angular.js">
     <img ng-src="moon.png" jaggy alt="for Angular.js">
-    <img ng-src="yuno.png" jaggy alt="for Angular.js">
+    <img ng-src="yuno.png" jaggy jagged="rendered" alt="for Angular.js">
     <!-- <img src="tumblr_n39vfaV03s1rnbw6mo1_400.gif" jaggy alt="for Angular.js"> -->
     <!-- <img src="tumblr_n39vfaV03s1rnbw6mo1_400.gif" jaggy="pixelLimit:0" alt=""> -->
   </section>

public/jaggy.browser.js

@@ -330,60 +330,68 @@ service.config(["jaggy", function(jaggy) {
 }]);
 
 service.directive('jaggy', ["jaggy", "$compile", function(jaggy, $compile) {
-  return function(scope, element, attrs) {
-    var createSVG;
-    element.css('display', 'none');
-    scope.config = jaggy;
-    scope.$watch('config', (function() {
-      return createSVG();
-    }), true);
-    return createSVG = function() {
-      var i, key, len, options, param, ref, ref1, url, value;
-      url = attrs.src;
-      if (url == null) {
-        url = attrs.ngSrc;
-      }
-      if ((url == null) || url.length === 0) {
-        if (jaggy.emptySVG) {
-          element.replaceWith(Jaggy.emptySVG());
-        }
-        return;
-      }
-      options = angular.copy(jaggy);
-      if (attrs.jaggy) {
-        ref = attrs.jaggy.split(';');
-        for (i = 0, len = ref.length; i < len; i++) {
-          param = ref[i];
-          ref1 = param.split(':'), key = ref1[0], value = ref1[1];
-          options[key] = value;
+  return {
+    scope: {
+      jagged: '='
+    },
+    link: function(scope, element, attrs) {
+      var createSVG;
+      element.css('display', 'none');
+      scope.config = jaggy;
+      scope.$watch('config', (function() {
+        return createSVG();
+      }), true);
+      return createSVG = function() {
+        var i, key, len, options, param, ref, ref1, url, value;
+        url = attrs.src;
+        if (url == null) {
+          url = attrs.ngSrc;
         }
-      }
-      return Jaggy.createSVG(url, options, function(error, svg) {
-        var angularElement, script, svgElement;
-        if (svg != null) {
-          svg = Jaggy.regenerateUUID(svg);
+        if ((url == null) || url.length === 0) {
+          if (jaggy.emptySVG) {
+            element.replaceWith(Jaggy.emptySVG());
+          }
+          return;
         }
-        if (svg != null) {
-          svgElement = angular.element(svg);
+        options = angular.copy(jaggy);
+        if (attrs.jaggy) {
+          ref = attrs.jaggy.split(';');
+          for (i = 0, len = ref.length; i < len; i++) {
+            param = ref[i];
+            ref1 = param.split(':'), key = ref1[0], value = ref1[1];
+            options[key] = value;
+          }
         }
-        if (error) {
-          if (error === true) {
-            return element.css('display', null);
+        return Jaggy.createSVG(url, options, function(error, svg) {
+          var angularElement, script, svgElement;
+          if (svg != null) {
+            svg = Jaggy.regenerateUUID(svg);
           }
-          if (!jaggy.emptySVG) {
-            throw error;
+          if (svg != null) {
+            svgElement = angular.element(svg);
           }
-          svgElement = angular.element(Jaggy.emptySVG());
-        }
-        angularElement = $compile(svgElement)(scope);
-        element.replaceWith(angularElement);
-        element = angularElement;
-        script = element.find('script');
-        if (script != null) {
-          return eval(script.html());
-        }
-      });
-    };
+          if (error) {
+            if (error === true) {
+              return element.css('display', null);
+            }
+            if (!jaggy.emptySVG) {
+              throw error;
+            }
+            svgElement = angular.element(Jaggy.emptySVG());
+          }
+          angularElement = $compile(svgElement)(scope);
+          element.replaceWith(angularElement);
+          element = angularElement;
+          script = element.find('script');
+          if (script != null) {
+            eval(script.html());
+          }
+          if (typeof scope.jagged === 'function') {
+            return scope.jagged(scope, element, attrs);
+          }
+        });
+      };
+    }
   };
 }]);