Question

我使用SVG在dom上创建了javaScript图片。现在我想在这些图像上绑定指令。我不知道该怎么做。任何人都可以帮我找到解决方案吗？
谢谢。
我在这里写我的代码：
我想将这个forImage Directive添加到image元素中。简单来说，我只想知道如果我使用DOM在javaScript上创建一个元素，而不是bind使用Angular directive.上的//HTML <body ng-controller= "Ctrl" > <div class="row"> <div id="editor"></div> </div> </body> //My controller app.controller('Ctrl', function ($scope) { var paper = Raphael("editor", 635,500);// Raphael element(it creates SVG tag) to draw image. var image = paper.image(img.src, 200, 200,300,400);// Image drawn on the SVG. }) //My directive app.directive('forImage', function () { return { restrict:'CA', link: function (scope,elem,attr) { elem.bind('mousedown', function (e) { // Mousedown event to be bind on image console.log("Image binding"); }); } } });事件更新：我发现$ compile用于动态添加指令。有没有办法从cntroller编译DOM？

{{1}}

Answer 1

好的，我认为这最终是解决方案。看看小提琴。我添加了一个红色矩形，以便您可以看到，您的指令仅在图像上触发。我使用$ compile来使添加的指令（setAttribute()）起作用。

app.directive('raphaelDir', function($compile) {
      return {
      restrict: 'E',
      replace: 'true',
      template: '<div id="editor"></div>',
      link : function(scope,element, attrs) {
      var paper = Raphael("editor", 500,500);
      var image = paper.image(
      "http://i.forbesimg.com/media/lists/companies/google_416x416.jpg",
       20,30,100,100);
      image.node.setAttribute('for-image', '');
      $compile(element)(scope);
  },
 };
});

http://jsfiddle.net/nnfve2tx/5/

将AngularJS指令绑定到元素

1 个答案: