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

我試圖做一個指令嵌入planetaryjs 如何從angularjs指令引用<canvas>元素？

我把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。

你知道如何使這項工作？

來源

2014-01-24 François Romain

你需要加載一個包含指令

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

來源

2014-01-24 19:23:13 RedHotScalability

oups，我傻......這得益於該模塊。我更新了plunkr，但它仍然無法正常工作。 –

它正在工作。檢查javascript控制檯：angular.element： [canvas.ng-isolation-scope，ready：function，toString：function，eq：function，push：function，sort：function ...] – RedHotScalability

抱歉，但我沒有看到它工作:)。我檢查了javascript控制檯，並且我看到一個錯誤：'TypeError：Object [object Object]沒有方法'getContext''，並且行星沒有顯示在頁面中... –

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

回答

相關問題