Угловое ng-мерцание на интервале обновления $ scope

Question

У меня есть фабрика, которая объединяет 2 запроса GET и должна вернуть их в $ scope. Все работает нормально, пока я не добавил ng-if. С ng-if мне нужно решить, какой значок или стиль мне нужно применить. Когда я использую ng-if, значок мигает при каждом обновлении. (Попробовал ng-class и ng-switch и т. Д., Все они имеют одинаковую проблему) Без использования ng-if, у него вообще нет проблем.

Вот мой код:

Завод

app.factory('allDevices', function($http, CONFIG, $localStorage) { 

var obj = {}; 
    obj.list = function(zoneId){ 

     return $http.get('http://'+CONFIG.homey_ip + '/api/manager/devices/?zone='+zoneId, CONFIG.httpconfig).then(function(response){ 
      this.devices = response.data.result; 
      var itemsProcessed = 0; 
      return angular.forEach(this.devices, function(value, key, array) { 
            //store data of 1st call in this.userDetails 
      return $http.get('http://'+CONFIG.homey_ip + '/api/device/'+value.id, CONFIG.httpconfig).then(function(response){ 
       this.devices[key].state = response.data.result; 
       itemsProcessed++; 
       if(itemsProcessed === array.length) { 

        return this.devices; 
       } 
      }) 

     }) 
     }) 
    } 
return obj; 
}); 

Контроллер

// Set interval 
$scope.intervalFunction = function(){ 
    timer = $timeout(function() { 

    //Get alldevices within the default zone and push to frontend. 
    allDevices.list($scope.$storage.defaultZone).then(function(response){ 
     $scope.devicelist = response; 


    }); 
    $scope.intervalFunction(); 
    }, 1000) 
}; 

// Kick off the interval 
$scope.intervalFunction(); 

(текущем) HTML, так как я попробовал несколько способов.

  <div class="panel-body"> 
      <div style="" class="col-sm-2 light" ng-repeat="device in devicelist track by device.id" ng-if="device.class == 'light' || device.class == 'socket'"> 
       <div ng-if="device.state.onoff == false" hm-tap="tap(device.id, true)" id="device-light" style="margin-bottom:10px;margin-top:5px;background:rgba(255,255,255,0.2);background-size: cover;-webkit-mask-size: contain;-webkit-mask-position: center center;-webkit-mask-repeat: no-repeat;width:100%;height:50px;-webkit-mask-image: url(http://192.168.2.72{{device.icon}});"> </div> 
       <div ng-if="device.state.onoff == true" hm-tap="tap(device.id, false)" id="device-light" style="margin-bottom:10px;margin-top:5px;background:rgba(255,255,255,0.9);background-size: cover;-webkit-mask-size: contain;-webkit-mask-position: center center;-webkit-mask-repeat: no-repeat;width:100%;height:50px;-webkit-mask-image: url(http://192.168.2.72{{device.icon}});"> </div> 
       <span class="devicename">{{device.name}}</span> 
      </div> 
      </div> 

Answer 1

Важным следствием этого является то, если ngModel используется в ngIf для связываются с JavaScript примитивного, определенной в родительской области. В этом случае любые изменения, внесенные в переменную в области дочерних объектов , переопределяют (скрывают) значение в родительской области.

Причина в том, что ng-if создать ребенку $scope, легкий способ исправить это может быть использовать ng-show вместо потому что основно просто показано или скрытый элемент путем добавления или удаления класса CSS нг скрытия на элемента.