angularJSの異なるビューの背景画像が異なる

私はangularJSが初めてで、別のページに異なる背景を付けようとしています。しかし、私は私の見解をindex.htmlのいくつかの要素に結びつけているので、難しかったです。angularJSの異なるビューの背景画像が異なる

index.htmlを

<div class="top-container"> 
     <div class="navigation" > 
      <nav>....</nav> 
     </div> 
     <div ui-view="topContent"></div> 
</div>

UIビューは、ナビゲーション要素に結合されている各ページの新しいコンテンツを注入します。私は現在、サイト全体の背景を持っています

.top-container{ 
    background-image: url('bg.jpeg'); 
    }

どのように私は異なるページの背景を変更できますか？私が行っているページに基づいてbgイメージを変更するために、何らかの変数や何かを渡すことができます。

おかげ

出典

2017-03-17 nash63

これは私がやる方法です。まず、すべてのビューで背景を設定します。

$stateProvider.state("home", 
      { 
       templateUrl: "/scripts/app/home/home.html", 
       url: "/home", 
       controller: 'HomeCtrl', 
       data: { 
        background: 'home' 
       } 
      }) 
      .state("login", 
      { 
       templateUrl: "/scripts/app/login/login.html", 
       url: "/login", 
       controller: 'LoginCtrl', 
       data: { 
        background: 'login' 
       } 
      });

ここで、すべての状態の設定を変更してルートスコープに入れます。

app.run([ 
    '$rootScope', function($rootScope) 
    { 

     $rootScope.$on('$stateChangeStart', function(event, toState) 
     { 
      $rootScope.background = toState.data.background; 
     }); 
    } 
]);

ここで、HTMLでは、必要な要素に基づいてルートスコープから背景を設定します。気になりますが、これはあなたのng-app宣言の内側になければなりません。

<body ng-class="background">

これはあなたのための角度の美しさです。

また、これはすべての州ごとに変化するすべてのもののための私の解決策です。初心者のようなページタイトル..

出典

2017-03-17 14:37:32 Alok

私は自分の州に背景を追加しました。私は$ rootscope.backgroundを私のコントローラの状態から渡された値に代入しようとしましたが、私は未定義のエラーバックグラウンドを取得します。また、どのようにCSSで2つのbgイメージを追加しますか？ .home {background-image： "a.jpeg"}と.login {background-image： "b.jpeg"}を使用していますか？ – nash63

ここにプランカーがあります：https://plnkr.co/edit/0bSnMF5nLONP9i1lQCWZ?p=preview理想的には、クラスを使用して背景の変更を行います。本当にシンプルです。 – Alok

それは今作動する！エラーを投げていたイベントパラメータを先に注入しなかった – nash63

あなたは、あなたのCSSクラスのngStyleを使用することができますngのクラスのディレクティブ

ng-class="{'class1': yourvalue == 'something' || yourvalue == 'somethingelse'}"

出典

2017-03-17 14:32:44

を使用することができます。 here は色を変更するためのデモプランナーです。

出典

2017-03-17 14:34:12 ZearaeZ

ビューが変更されたときに.top-container divに新しいクラス名を追加することができます。

$scope.$on('$routeChangeStart', function(next, current) { 
    ... you could trigger something here ... 
});

出典

2017-03-17 14:36:48 scharf

$ routeChangeStartリスナーを使用できます。これは、別のルート/ビューに切り替えるたびに発生します。

$rootScope.$on('$routeChangeStart', function (event, next, current) { 
    if(current.loadedTemplateUrl.indexOf("/call") > -1){ 
     // set the required background image 
    }else if(current.loadedTemplateUrl.indexOf("/login") > -1){ 
     // set the required background image 
    } 
});

あなたの背景画像やNG-クラスを設定するためにJavaScriptを使用することができます。例えば

ng-class="{'one': url == '/login'}"

注：あなたのクラスに背景画像のプロパティを追加することを忘れないでください。

出典

2017-03-17 15:33:00

angularJSの異なるビューの背景画像が異なる

答えて

関連する問題