web-dev-qa-db-ja.com

Angular JSとDirective Linkおよび$ timeout

angularJSとディレクティブの非常に基本的な例に問題があります。 webrtcでウェブカメラ画像を表示するディレクティブを作成したい。私のコードは完全にストリームを表示しますが、タイムアウトを追加すると（たとえば、キャンバスを更新するために）$ timeoutが機能しません。これはコードです：

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

何が問題ですか？この条件で$ timeoutが機能しないのはなぜですか？そして最後に解決策がありますか？

前もって感謝します

javascriptangularjsangularjs-directivetimeout
34
cingusoft

あなたのコードでは、コメントは「1つの「パス」のみを表示」と言っています。タイムアウトは、指定された遅延の後、1回だけ実行されます。

おそらく、定期的な呼び出しを設定するsetInterval（pre angular 1.2）/ $ interval（1.2の新機能）の場合。setIntervalバージョンは次のとおりです。

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

これは外部jQuery呼び出しであるため、DOMを更新するには（適切な変更を行う場合）angularを伝える必要があります。）（$ timeoutはangular versionはDOMを自動的に更新します）

14
KayakDave

他のモジュールのように、ディレクティブに依存関係を注入できます：

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

ここに疑問があるかどうかはわかりませんが、$timeoutは、javascriptのプレーンsetTimeout関数とほとんど同じであり、setIntervalとは対照的に、一度だけ実行されると想定されています。

Angular 1.2.0を使用している場合は、 $timeout$interval 。そうでなければ、1.0バージョンを使用している場合は、再帰的にすることができます。

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