Açısal yükleme çubuğunu sayfanın üst kısmında değil, belirli bir "div" içinde nasıl görüntüleyebilirsiniz?

Yakın bir zamanda, http çağrısı ekranındaki ilerlemeyi göstermek için angular-loading-bar.js'yi kullanmaya başladım. Varsayılan olarak, mavi ilerleme çubuğu ekranın üstünde görüntülenir, ancak ekranın üst kısmında görüntülenmesini değil, sadece belirli bir div içinde olmasını istiyorum. Ekranın üst kısmında görüntülenen alır bu ilerleme çubuğu yapmayı, ancak sadece kod aşağıda satırını eklemeniz gerekir ilerleme çubuğu,Açısal yükleme çubuğunu sayfanın üst kısmında değil, belirli bir "div" içinde nasıl görüntüleyebilirsiniz?

angular.module('app', ['angular-loading-bar']);

aktive etmek this answer gösterildiği gibi , ben bir div ve ben o belirli div içinde görüntülenecek olan ilerleme çubuğunu istiyorum. Ben çekirdeği angular-loadingbar.js açtı , sana ana seçici body olduğunu görebileceğiniz gibi onlar

this.parentSelector = 'body'; 
this.spinnerTemplate = '<div id="loading-bar-spinner"><div class="spinner-icon"></div></div>'; 
this.loadingBarTemplate = '<div id="loading-bar"><div class="bar"><div class="peg"></div></div></div>';

aşağıdaki satırları kullanarak ilerleme çubuğu ekleyerek olduğunu tespit, bu değiştireceğiniz bir yol var yükleme çubuğunu çağıran sayfasından parentSelector?

Her türlü yardım için şimdiden teşekkür ederiz!

kaynak

2016-04-01 Saumil Soni

pozisyonu şablonu: Eğer loadingBar veya dönen konumlandırmak isterseniz

, sen enjekte şablonu istediğiniz öğeye bir CSS seçicisi bulunmaktadır. Varsayılan <body> öğedir:

angular.module('myApp', ['angular-loading-bar']) 
    .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) { 
    cfpLoadingBarProvider.parentSelector = '#loading-bar-container'; 
    cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Custom Loading Message...</div>'; 
    }]) 


<div id="loading-bar-container"></div>

Github

kaynak

2016-04-01 19:13:25 shammelburg

üzerinde açısal yüklemeli bar belgelere Alındığı Bunu denedim, ama parentSelector değiştirirken, çubuk penceresinin üst kısmında kalır. Özel yükleme metninin eklendiği yeri değiştirir, ancak çubuğun kendisini değiştirmez ... – Paulos3000

@ Paulos3000 Eski, ama belki başkaları için yararlı olabilir. '# Loading-bar .bar {top:% 50;}' i içerecek şekilde css'yi düzenlemeyi deneyin ve üzerine yazılmadığından emin olmak için css komut dosyalarınızın sırasını kontrol edin. – user153882

Ekranda sadece basit bir yükleyici gerçekleştirmek için herhangi bir dış kütüphane kullanmazdım. En kolay çözüm, istediğiniz yerde DOM düğümü oluşturmak ve yalnızca $rootScope'daki belirli bir bayrak true, i. E .:

kaynak

2016-04-01 19:11:52 IProblemFactory

Açısal yükleme çubuğunu sayfanın üst kısmında değil, belirli bir "div" içinde nasıl görüntüleyebilirsiniz?

cevap

İlgili konular