Question

我有一个结合了2个GET请求的工厂，应该将它返回到$ scope。一切正常，直到我添加ng-if。使用ng-if我需要决定我需要应用哪个图标或样式。当我使用ng-if时，每次更新时图标都会闪烁。（尝试过ng-class和ng-switch等，都有相同的问题）不使用ng-if，它根本没有问题。< / p>

这是我的代码：

工厂

 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

这一点的一个重要含义是在ngIf中使用ngModel 绑定到父作用域中定义的javascript原语。在这 case对子范围内的变量所做的任何修改将覆盖（隐藏）父范围中的值。

原因是ng-if创建了子$scope，修复它的简单方法可能是使用ng-show，因为它基本上只是显示或通过删除或添加ng-hide CSS类来隐藏元素元件。

Angular ng-if在$ scope update interval上闪烁

1 个答案: