基本 jquery fiddle 到 Angular 指令

Question

这是一个 jQuery fiddle 我正在尝试移植到 Angular 指令中：http://jsfiddle.net/rhtr1w04/

这是我的 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();
    }
  };
})

和我的 index.html（包含 app.js 和 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>

但是，当然，它不会呈现。我是否正确使用了 DDO？我应该包括什么来制作这个渲染？提前致谢。

Answer 1

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

您需要遵循命名约定：camelCase 变为 camel-case

见"Matching Directives"

基本 jquery fiddle 到 Angular 指令

Basic jquery fiddle to Angular Directive

javascript

jquery

angularjs

highcharts

angularjs-directive