add transclusion

Author: crisbeto

README.md

@@ -26,13 +26,13 @@ angular.module('someModule', ['angular-svg-round-progress'])
 * To edit the default values, change the options in the `roundProgressConfig` constant.
 * Since the `0.2.0` release this directive uses dynamic binding. For example, if you want to change the fill color at a certain value, you can use `color="{{ (current / max < 0.5) ? '#ff8080' : '#45ccce' }}"`.
 
-| Name           | Description                                                                                               | Required  | Default value     | Possible values   | 
+| Name           | Description                                                                                               | Required  | Default value     | Possible values   |
 | ---            | ---                                                                                                       | ---       | ---               | ---               |
-| `current`      | The current progress. Limited by the `max` option.                                                        | Yes       | undefined         | Integer           | 
-| `max`          | The progress' maximum value.                                                                              | Yes       | undefined         | Integer           | 
+| `current`      | The current progress. Limited by the `max` option.                                                        | Yes       | undefined         | Integer           |
+| `max`          | The progress' maximum value.                                                                              | Yes       | undefined         | Integer           |
 | `radius`       | Radius of the circle.                                                                                     | No        | 50                | Integer           |
-| `color`        | The color of the `current` value on the circle.                                                           | No        | #45ccce           | Hex color         |
-| `bgcolor`      | Color of the circle's background.                                                                         | No        | #eaeaea           | Hex color         |
+| `color`        | The color of the `current` value on the circle.                                                           | No        | #45ccce           | Hex color or string. Refer to [this example](https://github.com/crisbeto/angular-svg-round-progressbar/issues/29) for an example of using a gradient.        |
+| `bgcolor`      | Color of the circle's background.                                                                         | No        | #eaeaea           | Hex color or string. Refer to [this example](https://github.com/crisbeto/angular-svg-round-progressbar/issues/29) for an example of using a gradient.         |
 | `stroke`       | Specifies the circle's thickness.                                                                         | No        | 15                | Integer           |
 | `semi`         | Whether the progressbar should be a full circle or a semicircle.                                          | No        | false             | Boolean           |
 | `clockwise`    | Whether the progressbar should rotate clockwise or counter-clockwise.                                     | No        | true              | Boolean           |

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-svg-round-progressbar",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "homepage": "https://github.com/crisbeto/angular-svg-round-progressbar",
   "authors": [
     "crisbeto"

build/index.html

@@ -101,7 +101,7 @@ <h2>Sample progressbar</h2>
                 round-progress
                 max="max"
                 current="current"
-                color="{{ currentColor }}"
+                color="{{ getColor() }}"
                 bgcolor="{{ bgColor }}"
                 radius="{{ radius }}"
                 semi="isSemi"
@@ -110,6 +110,13 @@ <h2>Sample progressbar</h2>
                 clockwise="clockwise"
                 iterations="{{ iterations }}"
                 animation="{{ currentAnimation }}">
+
+                <svg>
+                    <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
+                        <stop offset="5%"  stop-color="green"/>
+                        <stop offset="95%" stop-color="gold"/>
+                    </linearGradient>
+                </svg>
             </div>
         </div>
 
@@ -137,6 +144,11 @@ <h3>Customize!</h3>
                 <input id="clockwise" type="checkbox" ng-model="clockwise"/>
             </div>
 
+            <div class="cf">
+                <label for="gradient">Gradient:</label>
+                <input id="gradient" type="checkbox" ng-model="gradient"/>
+            </div>
+
             <div class="cf">
                 <label for="current">Current:</label>
                 <input id="current" type="number" ng-model="current"/>
@@ -187,7 +199,7 @@ <h2>Upload progress example</h2>
                 round-progress
                 max="100"
                 current="uploadCurrent"
-                color="{{ currentColor }}"
+                color="{{ getColor() }}"
                 bgcolor="{{ bgColor }}"
                 radius="{{ radius }}"
                 semi="isSemi"
@@ -266,6 +278,10 @@ <h2>Upload progress example</h2>
             $scope.getFontSize = function(){
                 return $scope.radius/($scope.isSemi ? 3.5 : 3) + 'px';
             };
+
+            $scope.getColor = function(){
+                return $scope.gradient ? 'url(#gradient)' : $scope.currentColor;
+            };
         }]);
     </script>
 </body>

build/roundProgress.js

@@ -270,13 +270,14 @@ angular.module('angular-svg-round-progress')
 
             var base = {
                 restrict: "EA",
-                replace: true
+                replace: true,
+                transclude: true
             };
 
             if(!service.isSupported){
                 return angular.extend(base, {
                     // placeholder element to keep the structure
-                    template: '<div class="round-progress"></div>'
+                    template: '<div class="round-progress" ng-transclude></div>'
                 });
             }
 
@@ -402,6 +403,7 @@ angular.module('angular-svg-round-progress')
                     '<svg class="round-progress" xmlns="http://www.w3.org/2000/svg">',
                         '<circle fill="none"/>',
                         '<path fill="none"/>',
+                        '<g ng-transclude></g>',
                     '</svg>'
                 ].join('\n')
             });

build/roundProgress.min.js

@@ -1,6 +1,6 @@
 {
   "name": "angular-svg-round-progressbar",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "AngularJS module that uses SVG to create a circular progressar",
   "main": "roundProgress.js",
   "scripts": {},

package.json

@@ -5,13 +5,14 @@ angular.module('angular-svg-round-progress')
 
             var base = {
                 restrict: "EA",
-                replace: true
+                replace: true,
+                transclude: true
             };
 
             if(!service.isSupported){
                 return angular.extend(base, {
                     // placeholder element to keep the structure
-                    template: '<div class="round-progress"></div>'
+                    template: '<div class="round-progress" ng-transclude></div>'
                 });
             }
 
@@ -137,6 +138,7 @@ angular.module('angular-svg-round-progress')
                     '<svg class="round-progress" xmlns="http://www.w3.org/2000/svg">',
                         '<circle fill="none"/>',
                         '<path fill="none"/>',
+                        '<g ng-transclude></g>',
                     '</svg>'
                 ].join('\n')
             });