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

PROs：这些方法允许您为不同的页面设置特定的样式，更改一些布局选项，从配置文件中自定义它们等等。

CONs：您需要多做一些工作，如果您只需要设置单个页面的样式，则不是必需的

注意：上面的代码未经过测试，但应该给你一个想法

仅在主页/索引页面上的完整页面背景

1 个答案: