Question

问题是我的md菜单以一种奇怪的方式“刷新”（而不是闪烁），我正在使用$ interval检查数据库中的新记录。此md菜单用于通知。

要以视觉方式了解其外观，请检查以下动画gif：

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

数据库中只有3条通知，但这就像ng-repeat在每次刷新之前“将项目加倍”，然后正确显示内容。

我在md-menu元素及其一些子元素上尝试了ng-show和ng-if，但是没有任何效果。我也到处都尝试过ng-clock。

这是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代码，请注意我每5秒调用一次this.getNotification（）

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

如何防止这种奇怪的行为？甚至瞬间闪烁都比这要好得多。

AngularJS Material md-menu奇怪的刷新行为

0 个答案: