AngularJS Körperfunktion nach dem Zufallsprinzip gehen

Was ich versuche zu erreichen, ist der Körper Hintergrund wird auf ein zufälliges Bild beim Laden der Seite festgelegt. Ich habe sowohl eine Service- als auch eine Controller-Funktion ausprobiert.AngularJS Körperfunktion nach dem Zufallsprinzip gehen

Das Problem ist, dass dies funktioniert, aber wenn ich so etwas wie QuickInfos, klicken Sie auf Schaltflächen oder sogar Inspektor auf der Seite öffnen, wird die Methode erneut ausgelöst.

Derzeit:

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" }; 
});

und die html:

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

Quelle

2016-04-07 CaptainOfTheSky

Eine Funktion für 'ngStyle' ist einfach schrecklich !!! Es wird auf jeder Digest-Schleife berechnet –

Wie würden Sie es stattdessen tun? – CaptainOfTheSky

Controller, der das Ergebnis von 'getBodyStyle()' in eine der Eigenschaften des Bereichs ('$ scope.bodyStyle = getBodyStyle()') speichert und die Ansicht durch 'ng-style =" bodyStyle "' –

Wenn ein Modell in Sicht aktualisiert wird, aktualisiert die App die Ansicht.

Verwenden Sie eine Variable, um das Ergebnis Ihrer Funktion zu speichern.

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

oder erlauben dem Dienst das letzte Ergebnis zu erinnern:

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; 
});

Quelle

2016-04-07 20:34:16

in Ihrem 'AppCtrl' ersetzt Definieren Sie einen '$ scope.bodystyle' und weisen Sie ihm einen Wert bei der Controller-Initialisierung zu. Ihre Controller können Funktionen ausführen, Sie müssen sie jedoch der Ansicht zugänglich machen. –

Die Methode aufgerufen werden, jedes Mal läuft ein verdauen Zyklus wird, was passiert ... viel. Ich würde vorschlagen, den Service in Ihre AppController zu injizieren, das Ergebnis auf ein Objekt in Ihrem Bereich/Controller setzen und dann auf dieses Objekt von der ng-style zugreifen.

Quelle

2016-04-07 20:33:50 ach

Sie sollten nur ng-Stil setzen einen Bereich Eigenschaft zu sein, und lösen die Methode nur bei Controller-Aktivierung. Und verschiebe die Liste der JPGs auf eine Konfigurationskonstante im App-Modul. Wenn die Funktionalität an anderer Stelle verwendet wird, behalten Sie sie als Service bei und injizieren Sie sie in den Controller. Dann verwende es in der getBodyStyle-Controller-Methode.

(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">

Quelle

2016-04-07 20:54:25 allwiine

Wenn die Liste der Bilder von einer API-Methode stammt, kann es sinnvoll sein, sie als Service zu behalten. Die Liste zwischengespeichert zu haben wäre auch in diesem Fall gut fürs Geschäft. –

Ah, sicher. Sah aus, als wäre es hart codiert. – allwiine

In der Tat habe ich meine Vorstellungskraft verwendet, um herauszufinden, woraus sich die Anforderung entwickeln könnte. Morgen könnte sein Chef, sein Partner oder seine Ehefrau sagen: "Hey! Lass uns die zufällige Bildliste für den Nutzer spezifisch machen. Wie lange würde das dauern?" –

AngularJS Körperfunktion nach dem Zufallsprinzip gehen

Antwort

Verwandte Themen