0

ng-show did not work clearly for me in angular js. this is the "loading" div:

<div class="loader" ng-show="vm.loadingNotifications" ng-cloak>loading...</div>

and that's the API call in the controller:

function getNotifications(userId) {
   if (vm.generalNotifications.length > 0) {
       vm.loadingNotifications = false;
   } else {
       vm.loadingNotifications = true;
       $.ajax({
       type: 'GET',
       url: AppConfig.apiUrl + 'Notifications/GetAllNotificationsByUserId?userId=' + userId,
       success: function (notifications) {
           if (notifications) {
               $("#all-not").addClass("active");
               if (notifications.length > 0) {
                   let tempNotifications = [];
                   for (let j = 0; j < notifications.length; j++) {
                       let element = notifications[j];
                       let title = getSpecificConst(element.NotificationTitle)
                       element.NotificationTitle = title;
                       let text = getSpecificConst(element.NotificationText)
                       element.NotificationText = text;
                       tempNotifications.push(element);
                    }
                    vm.generalNotifications = sortArray(tempNotifications);
                    vm.displayedNotifications = sortArray(tempNotifications);
                    vm.isEmptyNotifications = false;
                }
                else {
                     vm.isEmptyNotifications = true;
                 }
            } else {
                vm.isEmptyNotifications = true;
            }
            vm.loadingNotifications = false;
         }
      });
   }
}

the VM loading is updating clearly, but the ng-show stack always in true.

Aviel Palgi
  • 49
  • 7

1 Answers1

0

you need to use AngularJS Scope on the controller.


$scope.vm = {
generalNotifications:[],
loadingNotifications: false,
....
};

function getNotifications(userId) {
   if ($scope.vm.generalNotifications.length > 0) {
       $scope.vm.loadingNotifications = false;
   } else {
       $scope.vm.loadingNotifications = true;
.....
}
cherful
  • 179
  • 4
  • i have scope ```.controller('HeaderController', ['$scope', '$http', 'AppConfig', '$translate', 'User', '$window', '$rootScope', 'Campaign5GBService', '$location', 'GoogleAnalytics', '$timeout', '$cookies', function ($scope, $http, AppConfig, $translate, User, $window, $rootScope, Campaign5GBService, $location, GoogleAnalytics, $timeout, $cookies) { var vm = this;``` the vm updating clearly but the cshtml not. – Aviel Palgi Jan 12 '22 at 10:48