Angular ng-style on body tag für verschiedene Seitenhintergründe?

Ich bin neu in angular und ngroute und versuche, ng-style zu verwenden, um für jede Seite einer Website einen anderen Bildhintergrund zu haben. Derzeit legt es den Hintergrund aller Seiten der Website fest, auch wenn ich verschiedene Bildpunkte für den Controller-Bereich habe.Angular ng-style on body tag für verschiedene Seitenhintergründe?

Meine html ist wie folgt:

<body ng-controller="mainController" ng-style="bodyStyles"> 
... 
    <div id="main"> 
     <div ng-view></div> 
</body>

Mein Skript: var angVenture = angular.module ('angVenture' [ 'ngRoute']);

// configure routes 
angVenture.config(function($routeProvider, $locationProvider) { 
    $routeProvider 

     // route for the index page 
     .when('/home', { 
      templateUrl : 'pages/home.html', 
      controller : 'mainController' 
     }) 

     // route for the about page 
     .when('/about', { 
      templateUrl : 'pages/about.html', 
      controller : 'aboutController' 
     }) 

... more routes.....  

// create the controller 
angVenture.controller('mainController', function($scope) { 
    // create a message to display in our view 
    $scope.message = 'home page'; 
    $scope.bodyStyles ={ 
     "background": "url(../images/someimage.jpg) no-repeat center center fixed", 
     "-webkit-background-size": "cover", 
     "-moz-background-size": "cover", 
     "-o-background-size": "cover", 
     "background-size": "cover" 
    } 
}); 

angVenture.controller('aboutController', function($scope) { 
    $scope.message = 'another page.'; 
}); 

....more controllers for different pages...

Wäre ich besser dran, dies mit dem UI-Router zu tun?

Quelle

2016-05-18 Michael Neas

Die beter Strategie wäre, das nicht in JavaScript zu tun, aber alle Stile zu Ihrem CSS zu bewegen. Sie können, dass $scope Variable durch Hinzufügen Klasse acheive und diese Klassen in css definieren:

-Controller

angVenture.controller('mainController', function($scope) { 
    // create a message to display in our view 
    $scope.message = 'home page'; 
    $scope.bodyClass = 'main-view'; 
});

Ansicht

<body ng-controller="mainController" ng-class="bodyClass">

CSS

.main-view { 
    "background": "url(../images/someimage.jpg) no-repeat center center fixed", 
    "-webkit-background-size": "cover", 
    "-moz-background-size": "cover", 
    "-o-background-size": "cover", 
    "background-size": "cover" 
}

Quelle

2016-05-18 05:05:45

Try This

angVenture.controller('mainController', function($scope, $location) { 
     // create a message to display in our view 
     var classObject = {"/home":"../images/someimage1.jpg", "/about": "../images/someimage1.jpg" }; 
     $scope.message = 'home page'; 
     $scope.imageName = classObject[$location.path()]; 
    });

CSS

.main-view { 

    "-webkit-background-size": "cover", 
    "-moz-background-size": "cover", 
    "-o-background-size": "cover", 
    "background-size": "cover" 
}

HTML

<body ng-controller="mainController" class="main-view" styel=""background": "url({{imageName}}) no-repeat center center fixed"">

Quelle

2016-05-18 05:15:06 byteC0de

Angular ng-style on body tag für verschiedene Seitenhintergründe?

Antwort

Verwandte Themen