如何从angularjs指令引用<canvas>元素？</canvas>

Question

我正在尝试制作一个嵌入planetaryjs

的指令

我拿了basic example on the documentation page并尝试把它放在一个指令中：

angular.module('clearApp.directives', [])
    .directive('planetary', function () {
        var planet = planetaryjs.planet();
        planet.loadPlugin(planetaryjs.plugins.earth({
            topojson: { file: 'lib/json/world-110m.json' }
        }));
        planet.projection.scale(250).translate([250, 250]);
        return {
            restrict: 'A',
            scope: {
                data: '='
            }, 
            link: function (scope, element, attrs) {
                var canvas = angular.element(element[0]);
                planet.draw(canvas);
            }
        }
});

并在html中：

<canvas planetary width='500' height='500'></canvas>

它不起作用。就像element[0]没有引用<canvas>元素一样。

此处为code in plunkr。

你知道怎么做这个吗？

Answer 1

您需要加载包含指令

的模块

var app = angular.module('myApp', ['clearApp.directives']);