整頁背景僅在主頁/索引頁上

Question

我有一個有趣的問題..我有一個典型的單頁應用程序，在index.html中，我有頁眉，頁腳和，並使用ui-router注入視圖。

當用戶位於主頁（index.html）上時，如何在...上顯示整頁背景？在其他任何頁面上，該背景都不存在（白色）。

的HTML：

<body ng-controller="MainController">

    <header>            
        <nav>
            <ul>
                <li><button>Login</button></li>
                <li><button>Tell Me More!</button></li>
            </ul>
        </nav>
    </header>


    <main>
        <section class="container">
            <div ui-view /></div>
        </section>
    </main>

    <footer>
            <ul>
                <li>Contact Us</li>
                <li>About Us</li>
            </ul>
    </footer>


    <script src="/assets/js/vendor/angular.min.js"></script>
    <script src="/assets/js/vendor/angular-ui-router.js"></script>
    <script src="/assets/js/vendor/angular-animate.js"></script>
    <script src="/assets/js/all.min.js"></script> 

</body>

app.js：

var app = angular.module('myApp', ['ui.router', 'ngAnimate']);

app.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

        .state('index', {
            url: '/index',
            templateUrl: 'partial/home.html',
            controller: 'HomeController'
        })

        .state('login', {
            url: '/login',
            templateUrl: 'partial/login.html',
            controller: 'LoginController'
        });

        $urlRouterProvider.otherwise('/index');
});

Answer 1

您可以通過設置將由控制器范圍繼承的$rootScope變量或通過UIrouter將某些樣式參數發送到不同狀態來為不同頁面應用不同樣式或圖像，然后在視圖中使用這些設置來應用您的樣式/圖像。

簡短說明：當用戶位於首頁上時，他們 不在index.html中，而是處於您定義為首頁的狀態（您在最初的問題中有此假設） 。

一些樣本：

選項1- $ rootScope中的設置

在模塊的app.run(...)您可以偵聽狀態更改事件並為您的特定路由設置一些變量，即：

angular.module('yourModuleNameHere').run(function($rootScope, ...
 //some global settings here:
 $rootScope.isHome = false;
 $rootScope.hasInnerHeader = false;
 $rootScope.bodyClass = "";
 $rootScope.bodyStyle = "";


 // Page change - specific settings
 $rootScope.$on("$stateChangeSuccess", function(event, currentRoute, previousRoute) {
  //some other processing you may need 
  switch ($state.current.name) {
        case 'main.home':
            $rootScope.headerClass = 'home-header';
            $rootScope.isHome = true;
            $rootScope.bodyClass = "home-body background-full";                
            break;
        default:
            //some default settings
 }

您可以直接在部分文件中使用這些設置：

<div id="header" class="{{headerClass}}">...some header content here....</div>

因為部分作用域繼承了$ rootScope。

選項2-從UIrouter發送參數（您可以從配置文件中獲取參數，將其作為提供者注入到app.config ）

為您的路線設置一些特定於頁面的數據：

$stateProvider
    .state('index', {
        url: '/index',
        templateUrl: 'partial/home.html',
        controller: 'HomeController',
        pageSettings: {
            bodyClass: "homepage-class";
        }
    })

在部分控制器中，您可以像這樣消耗它：

不要忘記為$state注入依賴項

function _init() {
    // ***** Route params check *******
    if ($state.current.pageSettings && $state.current.pageSettings.bodyClass)   {
     //do something with the class, ie: put it in the scope:
     $scope.myPartialClass = $state.current.pageSettings.bodyClass

     //or switch through different settings
        switch ($state.current.pageSettings.bodyClass) {
            case "homepage-class":
                $scope.hideSomeDiv = true;
                $scope.anotherSetting = false;
                break;
            case "homepage-fullscreen-class":
                $scope.hideSomeDiv = false;
                break;
            default:
        }
    }
}

_init();//call the init method

優點：這些方法可讓您為不同頁面設置特定樣式，更改某些布局選項，從配置文件中自定義它們，等等

缺點：您需要做更多的工作，如果您只需要為單個頁面設置樣式，就沒有必要了

注意：上面的代碼尚未經過測試，但應該可以給您一個提示

整頁背景僅在主頁/索引頁上

問題描述

1 個解決方案

解決方案1
1 2015-11-19 13:16:30

整頁背景僅在主頁/索引頁上

問題描述

1 個解決方案

解決方案1 1 2015-11-19 13:16:30

解決方案1
1 2015-11-19 13:16:30