Angularjs Материал MD-меню странное освежающее поведение - PullRequest
Новая
       19

Angularjs Материал MD-меню странное освежающее поведение

0 голосов
/ 21 июня 2019

Проблема в том, что мое md-меню "обновляется" (не мерцает) странным образом, я использую $ интервал для проверки новых записей в БД. Это md-меню для уведомлений.

Чтобы понять, на что это похоже, посмотрите этот анимированный GIF:

https://giant.gfycat.com/TidyBothJuliabutterfly.webm

В БД есть только 3 уведомления, но все равно, что ng-repeat "удваивает элементы" при каждом обновлении перед правильным отображением материала.

Я пробовал ng-show и ng-if для элемента md-menu и некоторых его дочерних элементов, ничего не получалось. Я также везде пробовал нг-часы.

Вот HTML-код: 

<span  class="SminiRedCircle" style="color:yellow; padding-top:1px" ng-show="ctrl.unreadCount > 0">{{
  ctrl.unreadCount
}}</span>
<md-menu  >
  <md-button
    aria-label="Notifications"
    class="md-icon-button md-small"
    ng-click="ctrl.openMenu($mdMenu, $event)"
  >
    <md-icon
      style="line-height: 17px"
      md-font-icon="fa fa-bell"
    ></md-icon>
  </md-button>

  <md-menu-content  width="4" style="margin-top:25px"
  ng-show="ctrl.notifications.length>0 "

  >
    <md-menu-item  

      ng-class={notRead:!note.timeRead}
    ng-repeat="note in ctrl.notifications">
      <md-button 
      ng-if="ctrl.notifications.length>0 "
      ng-click="ctrl.gotoNotificationTarget(note)">
        <md-icon
          md-font-icon="fa fa-external-link"
          md-menu-align-target=""
        ></md-icon>
        {{ note.subject }}
      </md-button>
    </md-menu-item>


  </md-menu-content>
</md-menu>

и вот соответствующий js-код компонента, обратите внимание, как я вызываю this.getNotification () каждые 5s 

    this.getNotifications = async function(){
        try{
            this.notifications = [];
            let response = await $http.post('/notifications/myNotifications', {});
            var apiRet = response.data;
            if (!apiRet.isSessionValid) {
                //$location.path("/login");
                return;
            }
            if (apiRet.isError || !apiRet.isSuccessful) {
                $location.path("/error/There was an error notifications");
                return;
            }
            if (!apiRet.isAllowed) {
                $scope.message = "You do not have permission to view notifications";
                return;
            }
            this.newNotifications = apiRet.data;
            this.notifications = apiRet.data;
            console.log(this.wait)
            this.unreadCount = this.notifications.reduce( (total, current)=>{
                if (current.timeRead){
                    return total;
                } else {
                    return total + 1;
                }
            }, 0);

            $scope.$apply();


        } catch (error){
            console.log(error);
            $location.path("/error/There was an error");
        }
    };

    this.getNotifications();


    this.interval = $interval(()=>{
       this.getNotifications();
   }, 5000);

Как предотвратить это странное поведение? даже мгновенное мерцание будет намного лучше, чем это.

...