强制AngularJS重新应用新元素的指令

Question

在我的一个项目中，我必须创建一个canvas元素，并将一些事件链接到它。出于这个原因，我创建了一个带有上下文的指令，在该上下文中，我定义了一组绑定到元素的方法。

• onMouseUp
• onmousedown事件
• onTouchMove
• ...

这适用于一个画布，但是当我必须在多个画布之间切换时出现问题

这是模板：

<canvas ng-if="context" drawing-canvas="context"></canvas>

指令：

mod.directive('drawingCanvas', ['nano', function (nano) {
  function link (scope, element, attrs) {
    scope.$watch(attrs.drawingCanvas, function (context) {
      var el = element.clone(true)
      element.replaceWith(el)
      element = el

      context.ctx = element[0].getContext("2d")

      //bind events
    })

  return {
    restrict: 'A',
    link: link
  }
}])

起初，我没有replaceWith部分。它用于创建一个没有先前上下文的绑定事件的新元素。这个方法的问题是当我删除画布时。似乎AngularJS放松了对新元素的控制并保持其自由。我最终得到了多个画布，而不是没有。

我尝试在切换之前删除context，但似乎它发生在同一个digest中，因此上下文从不是假的，画布也没有被删除视图。有没有一个很好的方法来处理我的问题？

如果有办法简单地强制AngularJS重新创建画布，我也可以删除$watch。