Angular JS and Directive Link and $timeout

Question

i have a problem with a very basic example with AngularJS and directives. I want to create a directive that show a webcam image with webrtc. My code show the stream perfectly but if i add a timeout ( for example to refresh a canvas ) the $timeout don't work this is the code:

wtffDirectives.directive('scannerGun',function($timeout){     return {         restrict: 'E',         template: '<div>' +             '<video ng-hide="videoStatus"></video>' +             '<canvas id="canvas-source"></canvas>' +                            '</div>',         replace: true,         transclude: true,         scope: false,         link: function postLink($scope, element){            $scope.canvasStatus = true;            $scope.videoStatus = false;             width = element.width = 320;            height = element.height = 0;             /* this method draw the webcam image into a canvas */            var drawVideoCanvas = function(){               sourceContext.drawImage(vid,0,0, vid.width, vid.height);            };             /* start the timeout that take a screenshot and draw the source canvas */            var update = function(){               var timeout = $timeout(function(){                 console.log("pass"); //the console log show only one "pass"                 //drawVideoCanvas();               }, 2000);            };             /* this work perfectly and reproduct into the video tag the webcam */            var onSuccess = function onSuccess(stream) {               // Firefox supports a src object               if (navigator.mozGetUserMedia) {                  vid.mozSrcObject = stream;               } else {                  var vendorURL = window.URL || window.webkitURL;                  vid.src = vendorURL.createObjectURL(stream);               }               /* Start playing the video to show the stream from the webcam*/               vid.play();               update();            };             var onFailure = function onFailure(err) {                if (console && console.log) {                 console.log('The following error occured: ', err);               }               return;            };             var vid = element.find('video')[0];            var sourceCanvas = element.find('canvas')[0];            var sourceContext = sourceCanvas.getContext('2d');             height = (vid.videoHeight / ((vid.videoWidth/width))) || 250;            vid.setAttribute('width', width);            vid.setAttribute('height', height);             navigator.getMedia (               // ask only for video               {                 video: true,                 audio: false               },               onSuccess,               onFailure            );          }        }     }); 

What is the problem? why the $timeout don't work in this conditions? and finally have a solution?

thank's in advance

Answer 1

You can inject dependencies to the directive like in other modules:

.directive('myDirective', ['$timeout', function($timeout) {    return {         ...         link: function($scope, element){             //use $timeout         }     }; }]);