在角度鏈接階段顯示微調器

我有一個需要大約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>

來源

2014-11-01 AngularInDepth.com

我在從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來啓動長時間運行的進程，因此它會發生在異步後臺線程上。（雖然我會認爲這是幕後的工作方式，取決於它究竟做了些什麼，需要這麼長時間......大概是以異步方式調用外部資源開始？）

來源

2014-11-01 21:31:03

不，不會調用外部資源，因爲正如您所說，它是異步的。問題在於角度編譯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/ < - 博客文章，從瘋狂實驗室如何使用包管理器來安裝類似字體，真棒，角，角航線的依賴，等。

來源

2014-11-01 21:33:34 Popcorn245

不知道關於角的應用，但對瀏覽器，有一個小提琴，值得一看......非常少的工作有一個良好的動畫http://jsfiddle.net/qzLdjq3c/5/

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

來源

2014-11-01 23:14:29 Sabha

沒有必要在這種簡單的情況下使用jQuery和操縱DOM，並將其與角度混淆。簡單的CSS就足夠了。 – Jarema 2014-11-02 05:56:07

這可能是ng-cloak

一個很好的候選

在編譯期間，ng-cloak類被刪除。通常它與display：none一起使用，但您也可以使用它來顯示一個微調器。

來源

2014-11-01 23:22:44

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

正確..你的腳本阻止了用戶界面。從不阻止用戶界面。使用$ timeout或settimeout將計算分解成幾部分。 – 2014-11-02 08:49:41

是的，但它不是我的腳本。它是角的。這正是我所要求的 - 一種明智的方式來將anuglar的連接階段分解成幾部分。 – 2014-11-02 10:09:17

在角度鏈接階段顯示微調器

回答

相關問題