javascript - Force AngularJS to reapply a directive on a fresh element -

in 1 of project, have create canvas element events linked it. reason, created directive takes context, in context, have defined set of methods bound element.

• onmouseup
• onmousedown
• ontouchmove
• ...

this working 1 canvas problems arise when have switch between multiple canvas

here's template:

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

and directive:

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   } }]) 

at first, didn't have replacewith part. used create fresh element without bound events of previous contexts. problem method when remove canvas. seems angularjs loose control on new element , keep free. end multiple canvas instead of none.

i tried delete context before switching seems happening in same digest , reason context never falsy , canvas isn't removed view. there nice way handle problem?

if there way force angularjs recreate canvas, remove $watch.