AngularJS Redraw问题?仅限Chrome

时间:2013-12-18 20:46:56

标签: javascript google-chrome angularjs angularjs-controller

AngularJS的新手,所以请耐心等待我:)

我们在处理存储库(以及之后)时使用它来轮询我们的API以获取更新。在一个特定页面上,数据已加载但未绘制到屏幕上。突出显示内容或调整浏览器大小会导致重绘并显示刚刚出现的所有角度值!最新的Chrome!

看看:一切都从" 0"或" - "但突出显示页面显示"优化图像"和#34; Filesize Savings"内容变化。

直播示例:
可能需要你重新进行角落拉伸失败

需要CHROME~版本31.0.1650.63 m 它适用于Firefox!?! http://crusher.io/repo/alhertz/didthesaintswin/63f49d36e709dea172fe7e4bbacbcfd834f9a642

这似乎与此问题非常相似,但我没有检测到嵌套控制器问题:Update page contents after GET request in AngularJS

当我尝试添加$scope.$apply()时,我收到此错误:http://docs.angularjs.org/error/$rootScope:inprog?p0=$apply

这是角度控制器中的相关代码(coffeescript):

  do poll = ->
    $http.get("#{$location.absUrl()}/poll.json").success((data, status, headers, config) ->
      if $scope.continuePolling
        #console.log("still polling #{$location.absUrl()}")
        $scope.data = data
        $scope.TotalOptimizedImage = $scope.CalcTotalOptimizedImage(data.images)
        $scope.TotalImgSize = $scope.CalcTotalImgSize(data.images)
        $scope.SavedImgSize = $scope.CalcSavedImgSize(data.images)
        $scope.TotalSavings = ($scope.TotalImgSize - $scope.SavedImgSize + 0)
        $timeout(poll, 10000)
    )

真的不知道如何分开来解决问题。想法?

1 个答案:

答案 0 :(得分:0)

看起来你需要在http.get的回调中调用$scope.apply。原因是回调将在控制器摘要之外发生。对不起,我不擅长咖啡剧本,但是这样的话:

 $http.get("#{$location.absUrl()}/poll.json").success((data, status, headers, config) 
  if $scope.continuePolling
    $scope.$apply(function() {  // wrap the stuff you want to update in the $scope.$apply
    #console.log("still polling #{$location.absUrl()}")
    $scope.data = data
    $scope.TotalOptimizedImage = $scope.CalcTotalOptimizedImage(data.images)
    $scope.TotalImgSize = $scope.CalcTotalImgSize(data.images)
    $scope.SavedImgSize = $scope.CalcSavedImgSize(data.images)
    $scope.TotalSavings = ($scope.TotalImgSize - $scope.SavedImgSize + 0)
  });
    $timeout(poll, 10000)
)

我建议您使用safeApply函数,并且有一个很棒的timeFunctions服务可以帮助您在几个项目中成功使用的轮询。您可以在此answer中找到它。