x回ごとにdivを表示して表示AngularJS

Question

私のアプリケーションにアラートとして機能するdivを表示して表示するのに問題があります。

現在、私はこれを永続的な非表示および表示アクションにするために$ intervalを使用していますが、DIVがX時間表示されたままで、同じX時間を隠すことが予想されます。ここで

はI0'mは今それをやってどのようである：助けを

function showNotification(idNotification) { 
     $('[id*=noti_]').addClass('dis_none'); 
     $('#noti_' + idNotification).removeClass('dis_none'); 
    } 

    function hideNotification() { 
     // $('#noti_' + idNotification).addClass('dis_none'); 
     $('[id*=noti_]').addClass('dis_none'); 
    } 

    function checkCalendar() { 
     var tomorrow = moment().add(1, "d").format("YYYY-MM-DD"); 
     WebApiFactory.GetShiftPeriod("BodyShop", "2017-11-07").then(function (data) { 
      // WebApiFactory.GetShiftPeriod("BodyShop", tomorrow).then(function (data) { 
      if(data[0].TargetPlantValue === 0){ 
       showNotification("alert"); 
      } 
     }); 
    } 

    function notifications(type, time) { 
     switch (type) { 
      case "calendar": 
       // checkCalendar(); 
       $interval(function() { 
        checkCalendar(); 
        console.log("Active"); 
       },time * 1000); 
       $interval(function() { 
        hideNotification(); 
        console.log("Hide"); 
       }, time * 1001); 


       break; 
     } 
    } 

感謝。

Answer 1

あなたは何を達成しようとしているのか分かりませんが、いくつかの 'x'時間の間、ダイアログを表示して隠す場合は、両方の間隔を同時に開始しないでください。ダイアログが表示されるのを待ってから、それを隠すためのタイマーを開始してください。

たとえば、 '100' ms後にタイマーを非表示にする必要がある場合。

function notifications(type, time) { 
    switch (type) { 
     case "calendar": 
       $interval(function() { 
        checkCalendar(); 
        $timeout(hideNotification, 100); 
       }, time * 1000); 
     break; 
    } 
} 

また、ここでは$timeoutというディレクティブを使用していたことに注意してください。 $intervalとほぼ同じですが、1回だけ呼び出されます。

は、どのように私はそれは少しトリッキーだ

隠すときにdiv要素が示されている時間が 時間と同じであることを確認、その者は、別のアルゴリズムを使用させることができます。 ここでは1つの$間隔しか持たず、現在の状態であるisNotificationActiveを保持し、この状態に応じて要素を表示/非表示します。

また、以前の開始間隔がある場合は、$interval.cancelを使用して停止することにも注意してください。私は次のように...

は、自分自身を隠すための "責任" あなたの通知要素（複数可）を作成し、このような何かをするだろう

var notificationInterval = null, 
    isNotificationActive = false; 

function notifications(type, time) { 
    switch (type) { 
     case "calendar": 
       $interval.cancel(notificationInterval); 
       notificationInterval = $interval(updateNotificationState, time * 1000); 
     break; 
    } 
} 

function updateNotificationState() { 
    if(isNotificationActive) { 
     //hide the element here; 
    } else { 
     //show the element here; 
    } 
    isNotificationActive = !isNotificationActive;  
} 

Answer 2

：

function showNotification(idNotification, hideAfter) { 
    var $el = $('#noti_' + idNotification); 
    $timeout.cancel($el.data('timoutRef')); // kill latent auto-hide (if scheduled) 
    $el.removeClass('dis_none'); // show 
    if(hideAfter) { 
     // Schedule auto-hide after `hideAfter` milliseconds, 
     // and keep a reference to the timeout so it can be cleared. 
     $el.data('timoutRef', $timeout(function() { 
      $el.addClass('dis_none'); // hide 
     }), hideAfter); 
    } 
} 

は今checkCalendar()とnotifications()

を調整

function checkCalendar() { 
    WebApiFactory.GetShiftPeriod("BodyShop", "2017-11-07").then(function (data) { 
     if(data[0].TargetPlantValue === 0) { 
      // Make sure the value passed below is one half the total cycle time 
      showNotification("alert", 1000/2); // show immediately, hide after 1/2 second 
     } 
    }); 
} 

function notifications(type, time) { 
    switch (type) { 
     case "calendar": 
      // Here, everything can be nice and simple 
      $interval(checkCalendar, time * 1000); // total cycle time 
     break; 
    } 
} 

さまざまな通知要素を指定しないでください。画面上で同じ不動産を占有するためには、おそらく他の通知を隠すことについて心配する必要はありません。

通知先がの場合は、に同じ不動産を占有しようとすると、番号を1つに減らすことを検討する必要があります。