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

Question

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

0

У меня есть фабрика, которая объединяет 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>

swttt 19 авг. 2016, в 15:04

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Andurit · Answer 1 · 2016-08-19T10-15-00.000Z

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

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

Ну, видел ошибку в моем первом посте. Но попробовал и нг-шоу с тем же результатом. (ng-hide, ng-class и т. д.) Должен был проверить это раньше, но, похоже, проблема не в ng-if. Когда я вывожу {{device.state.onoff}}, оно также мигает.