さまざまなページの背景のボディタグの角度ngスタイル？

私は新しく角度をつけていて、ウェブサイトの各ページに異なる背景を持つためにng-styleを使用しようとしています。現在、コントローラスコープのイメージURLが異なる場合でも、すべてのサイトのページの背景を設定します。さまざまなページの背景のボディタグの角度ngスタイル？

私のHTMLは次のようである：

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

マイスクリプト： 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...

私はui-routerでこれを行う方が良いでしょうか？

出典

2016-05-18 Michael Neas

JavaScriptでベター戦略を実行しないでください。すべてのスタイルをCSSに移動してください。あなたは$scope変数を使用してクラスを追加することによって、これをacheiveとCSSでこれらのクラスを定義することができます。

コントローラ

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

ビュー

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

出典

2016-05-18 05:05:45

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

HTML

この

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

をお試しください

出典

2016-05-18 05:15:06 byteC0de

さまざまなページの背景のボディタグの角度ngスタイル？

答えて

関連する問題