Basic jquery fiddle to Angular Directive

Question

Here is a jQuery fiddle I'm trying to port into an Angular directive: http://jsfiddle.net/rhtr1w04/

And here is my app.js

angular.module('app',[]).directive('angular-arc', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      var renderer;
      renderer = new Highcharts.Renderer(
        $('angular-arc')[0],
        400,
        300
      );

      renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({
        fill: '#FCFFC5',
        stroke: 'black',
        'stroke-width': 1
      }).add();
    }
  };
})

and my index.html (with all proper includes to app.js and jquery)

<!DOCTYPE html>
<HTML>
<HEAD>
  <script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
  <script src='app.js'></script>
</HEAD>
<BODY ng-app="app">
  <angular-arc />
</BODY>
</HTML>

However, of course, it doesn't render. Have I used the DDO correctly? What should I include to make this render? Thanks in advance.

Answer 1

.directive('angularArc', function() ...

You need to follow the naming convention: camelCase becomes camel-case

See "Matching Directives"

Basic jquery fiddle to Angular Directive

Question

1 answers

solution1
2 ACCPTED 2015-01-01 02:24:19

Basic jquery fiddle to Angular Directive

Question

1 answers

solution1 2 ACCPTED 2015-01-01 02:24:19

solution1
2 ACCPTED 2015-01-01 02:24:19