AngularJS gövde işlevi rasgele çıkıyor

Yapmaya çalıştığım şey, sayfa arka planındaki rastgele bir görüntünün ayarlandığı gövde arka planıdır. Hem servis hem de kontrolör fonksiyonunu denedim.AngularJS gövde işlevi rasgele çıkıyor

Sorun, bunun işe yaramasıdır, ancak araç ipuçlarına benzer bir şey yaparsam, düğmelere tıklarsam veya hatta sayfadaki denetçiyi açarsam, yöntem yeniden başlatılır.

Şu

app.service('getBodyStyle', function() { 
    var bgs = [ 
    //list of jpgs 
    ] 
    var rand = Math.floor(Math.random() * bgs.length); 
    var bg = bgs[rand]; 

    return { "background": "linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)), url('./Images/"+bg+"') no-repeat center center fixed" }; 
});

ve html: yöntem döngüsünü sindirmek bir her zaman denilen almak için gidiyor

body layout="column" ng-style="getBodyStyle()" ng-controller="AppCtrl">

kaynak

2016-04-07 CaptainOfTheSky

'ngStyle' işlevini kullanmak sadece korkunç! Her sindirim döngüsünde hesaplayacaktır –

Bunun yerine nasıl yaparsınız? – CaptainOfTheSky

“getBodyStyle()” sonucunu kapsam özelliklerinden birine ('$ scope.bodyStyle = getBodyStyle()') kaydederek ve görünümü 'ng-style =" bodyStyle "' –

Görünümdeki herhangi bir model güncellendiğinde, uygulama görünümü yeniler.

İşlevinizin sonucunu kaydetmek için bir değişken kullanın.

<body layout="column" ng-style="bodystyle" ng-controller="AppCtrl">

veya hizmet Son sonucu hatırlamasına izin: Sen sadece bir kapsam özelliği olmaya ng tarzı belirlesin

app.service('getBodyStyle', function() { 
    var self = this; 

    if (!self.bg) 
    { 
     var bgs = [ 
     //list of jpgs 
     ] 
     var rand = Math.floor(Math.random() * bgs.length); 
     var bg = bgs[rand]; 

     self.bg = { "background": "linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)), url('./Images/"+bg+"') no-repeat center center fixed" }; 
    } 
    return self.bg; 
});

kaynak

2016-04-07 20:34:16

'AppCtrl 'ile değiştiren denetleyici bir '$ scope.bodystyle 'tanımlayın ve kontrol cihazının başlatılmasında bir değer atayın. Denetleyicileriniz işlevleri çalıştırabilir, ancak bunları görünüme yansıtmanız gerekir. –

olur ki ... Bir sürü çalışır. Hizmeti, AppController ürününüze enjekte etmenizi öneririm, sonucu kapsam/denetleyicinizdeki bir nesneye ayarlar ve ardından bu nesneye ng-style'dan erişirsiniz.

kaynak

2016-04-07 20:33:50 ach

ve sadece denetleyici aktivasyonu ile yöntemini tetikler. Ve uygulama modülünde jpgs listesini bir yapılandırma sabitine taşıyın. İşlev başka bir yerde kullanılıyorsa, bunu bir hizmet olarak saklayın ve denetleyiciye enjekte edin. Daha sonra getBodyStyle denetleyici yönteminde kullanın.

(function() { 
    angular.module ("app") 
     .controller ("bodyController", bodyController); 

    bodyController.$inject = [/* deps */]; 

    function bodyController (/* deps */) { 
      var vm = this; 

      vm.backgroundStyle = ""; 

      activate(); 

      function activate() { 
       getBodyStyle(); 
      } 

      function getBodyStyle() { 
       //.... 
       vm.backgroundStyles = styles; 
      } 
    } 
})(); 


<body ng-controller="bodyController as vm" ng-style="vm.backgroundStyle">

kaynak

2016-04-07 20:54:25 allwiine

Görüntülerin listesi bir API yönteminden geliyorsa, hizmeti bir hizmet olarak tutmak iyi olabilir. Serviste önbelleğe alınan listeye sahip olmak, bu durumda da iş için iyi olacaktır. –

Ah, tabi. Sert kodlanmış gibi görünüyordu. – allwiine

Gerçekten de, ihtiyacımın nasıl evrimleşebileceğine dair hayal gücümü kullandım. Yarın patronu ya da eşi ya da karısı "Hey! Kullanıcıya özgü rastgele görüntü listesi yapalım. Bu ne kadar sürer?" –

AngularJS gövde işlevi rasgele çıkıyor

cevap

İlgili konular