在角度链接阶段显示微调器

问题描述：

我有一个需要大约3秒才能渲染的视图。在此期间，用户看不到页面上发生的任何事情。我试图添加微调，但它不旋转，它只是卡住了。我认为这是因为浏览器正在等待，直到JS代码完成，并且不能控制微调器。所以如果原因正是JS代码运行了3秒，浏览器在那段时间内无法执行任何操作，我该如何优化？如果我没有使用该框架，我可以将我的代码分成几个块，并在超时运行它们，但不知道在连接阶段如何使用Angular做到这一点。在角度链接阶段显示微调器

UPDATE：
添加jsfiddle来演示问题。代码执行在循环内时，微调器不旋转。

<img src="http://content.markitcdn.com/corporate/ResourceManager/9Iy-xMz_zHH-zXFAlhM-KA2/d/f/635151312565356632/Content/Images/Icons/General/spinner2.gif" alt=""> 
<script> 
    console.log('entering loop') 
    for (var i=0;i<300000000;i++) {} 
    console.log('leaving loop') 
</script>

答

我在从SQL Server中获取并显示数据库列表的控制器中有类似的问题。我希望显示等待光标，直到数据返回，但UI被冻结。我通过使用$rootScope方法（导致等待游标显示在视图中）切换isWaiting标志，然后在异步过程结束时清除回调中的该标志来解决此问题。

这不完全是你想要做的，但它可能足够接近以适应。您可能可以使用$scope而不是$rootScope用于您的目的的方法，并且具有控制是否显示微调器图像的div级别（而不是html级别）。

声明：这是用于使用node-webkit的桌面应用程序，而不是普通的浏览器。但我认为这种基本方法也可以在普通浏览器中运行。

CSS：

html.wait, html.wait * { 
    cursor: wait !important; 
}

MainController：

// sets up a method that can be used from any controller 
$rootScope.toggleWaiting = function (isWaiting) { 
    $rootScope.isWaiting = isWaiting; 
    $('html')[isWaiting ? 'addClass' : 'removeClass']('wait'); 
};

DatabasesController：

.controller('databasesController', ['$rootScope', '$scope', function($rootScope, $scope) { 

    $rootScope.toggleWaiting(true); 

    var SqlServerHelper = require("SqlServerHelper"); 
    var sqlServerHelper = new SqlServerHelper(/* sensitive config info removed */); 

    sqlServerHelper.getDatabases(function(err, results) { 
     /* standard error handling removed */ 
     $scope.$apply(function() { 
      $rootScope.toggleWaiting(false); 
      $scope.databaseList = results; 
     }); 
    }); 

}])

附：最后一个想法是：如果gif仍然出现冻结，那么可以使用控制器中的$timeout来启动长时间运行的进程，因此它会发生在异步后台线程上。（虽然我会认为这是幕后的工作方式，取决于它究竟做了些什么，需要这么长时间......大概是以异步方式调用外部资源开始？）

不，不会调用外部资源，因为正如您所说，它是异步的。问题在于角度编译DOM _synchroniously_并且在那段时间内不会将控制权返回给浏览器。您的解决方案似乎是针对异步情况，而不是我需要的。 – 2014-11-01 21:40:17

答

这是我如何实现装载机上我的角应用程序。这很简单。我用的是更少的文件下，它可以很容易地转换成CSS：

.loader{ 
    position: fixed; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    background:rgba(0, 0, 0, 0.45); 
    z-index: 9999999999; 

    i{ 
     font-size:80px; 
     height:80px; 
     width:82px; 
     color:#fff; 
     display:block; 
     text-align: center; 
     vertical-align:middle; 
     margin: auto; 
     position: absolute; 
     top: 0; 
     left: 0; 
     bottom: 0; 
     right: 0; 
    } 
}

然后你就可以添加这个网站到你的NG-观点：

<div class="loader show"> 
    <i class="fa fa-circle-o-notch fa-fw fa-spin"></i> 
</div>

请注意，我用的字体真棒和不是加载动画的.gif文件。

这里有一些来源做进一步阅读：

http://fontawesome.io

http://blog.madnesslabs.net/madness-u-package-managers/ < - 博客文章，从疯狂实验室如何使用包管理器来安装类似字体，真棒，角，角航线的依赖，等。

答

不知道关于角的应用，但对浏览器，有一个小提琴，值得一看......非常少的工作有一个良好的动画http://jsfiddle.net/qzLdjq3c/5/

$(window).load(function() { 
    $('.spinner').show(); 
    $(".spinner").hide(); 
});

没有必要在这种简单的情况下使用jQuery和操纵DOM，并将其与角度混淆。简单的CSS就足够了。 – Jarema 2014-11-02 05:56:07

答

这可能是ng-cloak

一个很好的候选

在编译期间，ng-cloak类被删除。通常它与display：none一起使用，但您也可以使用它来显示一个微调器。

请看我的更新 – 2014-11-02 05:47:27

正确..你的脚本阻止了用户界面。从不阻止用户界面。使用$ timeout或settimeout将计算分解成几部分。 – 2014-11-02 08:49:41

是的，但它不是我的脚本。它是角的。这正是我所要求的 - 一种明智的方式来将anuglar的连接阶段分解成几部分。 – 2014-11-02 10:09:17

在角度链接阶段显示微调器

相关推荐