Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
2334
Angular directive for igRadialGuage
posted

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);
		});
    }
  }
});   

  • 2334
    Verified Answer
    posted

    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
            });