Edit: Here is the jsfiddle - http://jsfiddle.net/aschaeffer/s6REN/
I am trying to write a directive for the igRadialGuage control. Firstly, I aim to do a most basic example. The source is pasted below.
Using the below directive I get the error "TypeError: Object [object Object] has no method 'igRadialGuage'"
Are there any samples of how to build a directive for any of the charts/guages?
app.directive("radialguage", function() { console.log("rg"); return { restrict: "E", // directive is an Element (not Attribute) scope: { // set up directive's isolated scope value: "@", // amount var passed by value max: "@", // amount var passed by value height: "@" }, template: // replacement HTML (can use our scope vars here) "
", replace: true, // replace original markup with template transclude: false, // do not copy original HTML content link: function (scope, element, attrs, controller) { console.log(element); console.log(scope.height, scope.max, scope.value); element.igRadialGuage("option", "height", scope.height); element.igRadialGuage("option", "width", "100%"); element.igRadialGuage("option", "maximumValue", scope.max); element.igRadialGuage("option", "value", scope.value); scope.$watch("value", function(newValue, oldValue, srcScope) { element.igRadialGuage("option", "value", newValue); }); } } });
I figured out the issue. Apparently you have to initiate the gauge using the following function rather than using element.igRadialGauge. The jsfiddle is update to show the working example. http://jsfiddle.net/aschaeffer/s6REN/
$("#radialGauge").igRadialGauge({ height: scope.height, width: "100%", maximumValue: scope.max, value: scope.value });