$ scope更新間隔で角がちらつく場合

Question

2つのGET要求を組み合わせたファクトリがあり、$ scopeに返す必要があります。私がng-ifを追加するまで、すべてうまく動作します。 ng-ifを使用して、どのアイコンやスタイルを適用する必要があるかを判断する必要があります。私はng-ifを使用しているとき、アイコンはすべてのアップデートで点滅します（ng-classとng-switchなども試しましたが、すべて同じ問題があります）。

ここに私のコードです：

工場

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、。 ngModelが親スコープで定義されたプリミティブJavaScriptに バインドにngIf内で使用されている場合

  <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

本の重要な含意があります。この の場合、子スコープ 内の変数に加えられた変更は、親スコープの値を上書き（非表示）します。

理由は、子供$scopeを作成し、それを修正する簡単な方法は、それがbasiclyだけ を示すか、削除するか、 要素上NG非表示CSSクラスを追加することにより、要素を非表示になっているため代わりにng-showを使用することができng-ifということです。