कोणीय जेएस और निर्देशक लिंक और $ टाइमआउट

Question

मुझे AngularJS और निर्देशों के साथ एक बहुत ही बुनियादी उदाहरण के साथ समस्या है। मैं एक निर्देश बनाना चाहता हूं जो webrtc के साथ एक वेबकैम छवि दिखाता है। मेरे कोड पूरी तरह से स्ट्रीम दिखाई लेकिन अगर मैं समय समाप्त (उदाहरण के लिए एक कैनवास ताज़ा करने के लिए) जोड़ने $ टाइमआउट काम नहीं करते इस कोड है:

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

क्या समस्या है? इस समय में $ टाइमआउट क्यों काम नहीं करता है? और अंत में एक समाधान है?

धन्यवाद की अग्रिम

Answer 1

में अपने कोड अपनी टिप्पणी कहते हैं 'केवल एक "पारित" दिखाने'। निर्दिष्ट, देरी के बाद, टाइमआउट केवल एक बार निष्पादित करता है।

शायद आप सेट इंटरवल (यदि आप प्री कोणीय 1.2 हैं)/$ अंतराल (1.2 से नया) जो आवर्ती कॉल सेट करता है। यहाँ setInterval संस्करण है:

var timeout = setInterval(function(){ 
    // do stuff 
    $scope.$apply(); 
}, 2000); 

मैं $ एक चेतावनी के बाद से इस है एक बाहरी jQuery फोन है कि आप डोम अद्यतन करने के लिए कोणीय बताने के लिए (यदि आप सभी उचित परिवर्तन करें) की जरूरत के रूप में लागू शामिल थे। ($ टाइमआउट जा रहा है एक कोणीय संस्करण स्वचालित रूप से अद्यतन करता है डोम)

Answer 2

सुनिश्चित नहीं हैं कि अगर मैं अपने संदेह यहाँ मिल गया है, लेकिन $timeout काफी जावास्क्रिप्ट सादा setTimeout समारोह के रूप में एक ही बात है, और यह रन माना जाता है केवल एक बार, के रूप में के रूप में विरोध किया setInterval।

यदि आप कोणीय 1.2.0 का उपयोग कर रहे हैं, तो प्रति $interval पर $timeout सेवा बदलें। अन्यथा आप 1.0 संस्करण पर हैं, तो आप इसे पुनरावर्ती बना सकते हैं:

var timeout; 
var update = function() { 
    // clear previous interval 
    timeout && timeout(); 
    timeout = $timeout(function() { 
    // drawSomething(...); 
    update(); 
    }, 2000); 
} 

Answer 3

आप अन्य मॉड्यूल में की तरह निर्देश के लिए उनकी निर्भरता इंजेक्षन कर सकते हैं:

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