Question

我有一个计算器功能，这是一个很大的功能，当我点击提交按钮然后调用计算器函数，在函数中没有ajax，只有客户端脚本，但丢失了大约10秒钟完成。计算器函数将计算并向$ scope.datalist添加更多对象，将使用ng-repeat在页面中显示datalist。我的问题是showloadingpage函数没有正常工作，我把showloadingpage函数放在计算器函数的第一个因为我想在运行计算器函数之前显示div层（加载页面文本和gif图像），但它只显示页面加载完成后的div层。在页面加载时，我无法滚动页面或触摸元素，所有内容都会在大约10秒内停止。

如果我在$ scope.showloadingpage（）之后放了一个return命令，那么div层将显示为immedialty。

如果我删除了datalist的ng-repeat，那么页面将加载快速，而不是停止页面，并且不需要div层加载状态。但总是需要ng-repeat来显示datalist中的数据。

$scope.calculator = function(){
  $scope.showloadingpage()
  // return;
  // if i put a return command here then div layer will be showed immedialty
  ....
  ....
  ....
  ....
  var i = 0;
  while(++i < 1000){
    ....
    ....
    var object = {.....}
    ....
    ....
    $scope.datalist.push( object );
  }
  // datalist with more 500 objects will be showed in page automatically with ng-repeat.
}

$scope.showloadingpage = function(){
   // <div id="loader-wrapper"></div>
   if (angular.element(document).find('#loader-wrapper').hasClass('hideloading')) {
   angular.element(document).find('#loader-wrapper').removeClass('hideloading');
   angular.element(document).find('#loader-wrapper').addClass('showloading');
}

Answer 1

<button ng-click="showloadingpage();calculator();"> Calculate </button>

试试这个。这可能会解决您的问题。

Answer 2

Angular默认使用jqLite来操作DOM元素，而.find（）方法仅支持标记查找。见documentation

顺便说一下，通过addClass或removeClass修改DOM并不是一种有角度的方法。您可以改为使用ng-show或ng-class指令：

$scope.calculator = function() {
    $scope.pageIsLoading = true
    .....
    $scope.pageIsLoading = false
}

在你的HTML中：

<div id="loader-wrapper" ng-show="pageIsLoading"></div>

或者

<div id="loader-wrapper" ng-class="{showloading: pageIsLoading, hideloading: !pageIsLoading}"></div>

最后，您可以将重函数包装在setTimeout（）中并逐渐计算以避免冻结：

function heavyFunction(start, end)
    while(++start < end) {
        var object = {.....}
        $scope.datalist.push( object );
    }
}

然后

var end = 1000
var step = 100
for (var i = 0; i < end; i+=step) {
     $timeout( //Angular's setTimeout wrapper, should be injected
        (function(start, end) {return heavyFunction.bind(this, start, end)})(i, i + step),
        100
     )
}

或类似的东西。希望它有所帮助。

无法在页面中显示调用函数的div层，而函数正在计算，而页面显示带有ng-repeat

2 个答案: