AngularJSディレクティブは、一度に呼び出すのではなく、複数の時間を呼び出します。

Question

データ操作を編集できるテキストエリアのディレクティブを作成しました。フォームには、同じ指示文として複数のテキストエリアがあります。また、イベントをトリガーするときには、ディレクティブを割り当てているすべての要素をトラバースします。

例：10個のテキストエリアがあり、 "HzAutosave"という指示があります。次に、特定のテキストエリアをクリックすると、特定のtextareaの値が返されますが、単一のフィールドに変更があるかどうかに関わらず、ソケットioイベントがトリガーされてサーバーにデータを10回送信します。

指令

.directive("hzAutoSaveTextarea", ['$timeout', '$interval', 'HzSocket', function ($timeout, $interval, HzSocket) { 
    var currentElement = null; 
    return { 
     restrict: "E", 
     replace: true, 
     require: "ngModel", 
     scope: {}, 
     template: "<textarea></textarea>", 
     compile: function (scope, element) { 
      return { 
       pre: function (scope, element, attrs) { 
        element.on("click", function (e) { 
         e.preventDefault(); 
         currentElement = attrs.id; 
         console.log("focused element:" + currentElement); 
         angular.element(".autosave").removeClass("active-element"); 
         element.addClass("active-element"); 
        }); 
       }, 
       post: function (scope, element, attrs) { 
        var currentVal = null, previousVal = null; 
        $interval(function() { 
         currentVal = angular.element(".active-element").val(); 
         if (null !== currentVal && undefined !== currentVal && "" !== currentVal) { 
          console.log("value::" + angular.element(".active-element").val()); 
          if (previousVal !== currentVal) { 
           console.log("save data to console"); 
           previousVal = currentVal; 
           var socket = io(); 
           var data = {module: "photo", element: currentElement, value: currentVal}; 
           HzSocket.emit('autosave', data); 
          } 
         } 
        }, 3000); 

       } 
      } 
     }, 
     link: function (scope, element, attrs, ngModel) { 

     } 
    } 
}]); 

HTML

<hz-auto-save-textarea ng-model="asContainer" placeholder="Description" id="{{result.photo_id}}" class="album_commentarea margin_top5 autosave"></hz-auto-save-textarea> 

私は、複数の時間ソケット要求とJavaScriptの他の有資格イベントをトリガ防ぐ方法がわかりません。

Answer 1

一度だけ実行されるディレクティブの工場機能に autosaveロジックを移動し

：

.directive("hzAutoSaveTextarea", ['$timeout', '$interval', 'HzSocket', function ($timeout, $interval, HzSocket) { 
    var currentElement = null; 

    var currentVal = null, previousVal = null; 
    $interval(function() { 
     currentVal = angular.element(".active-element").val(); 
     if (null !== currentVal && undefined !== currentVal && "" !== currentVal) { 
      console.log("value::" + angular.element(".active-element").val()); 
      if (previousVal !== currentVal) { 
       console.log("save data to console"); 
       previousVal = currentVal; 
       var socket = io(); 
       var data = {module: "photo", element: currentElement, value: currentVal}; 
       HzSocket.emit('autosave', data); 
      } 
     } 
    }, 3000); 

    return { 
     restrict: "E", 
     replace: true, 
     require: "ngModel", 
     scope: {}, 
     template: "<textarea></textarea>", 
     compile: function (scope, element) { 
      return { 
       pre: function (scope, element, attrs) { 
        element.on("click", function (e) { 
         e.preventDefault(); 
         currentElement = attrs.id; 
         console.log("focused element:" + currentElement); 
         angular.element(".autosave").removeClass("active-element"); 
         element.addClass("active-element"); 
        }); 
       }, 
       post: function (scope, element, attrs) { 
       } 
      } 
     } 
    } 
}]); 

この方法は一つだけ$intervalは何が必要ですセットアップになります。

Answer 2

ディレクティブごとに1つの間隔が作成されるため、これらの10のイベントが発生します。インターバルを共通のサービスに移行することをお勧めします。